Upload 上传：图片上传

需要用到的API

action：服务器上传地址
max-count：最大选择图片的数量
form-data：上传额外携带的参数
name：上传文件的字段名，供后端获取使用

第一种：选择图片后，直接上传

<template><view class="index"><u-upload :show-progress="false":action="action" :form-data="formData" max-count="3" name="file"@on-uploaded="onUploaded"  @on-change="onChange"></u-upload></view>
</template>
<script>export default {data() {return {// 演示地址，请勿直接使用action: 'https://api.diandianhg.com/api/common/upload',formData: {access_token:uni.getStorageSync('access_token')},fileList: []}},methods:{// 上传成功onUploaded(res) {this.fileList = res;console.log(this.fileList);},// 无论成功失败都会触发onChange(res){let data = JSON.parse(res.data)if(data.code == 0){console.log(data)uni.showToast({icon:'none',title: data.msg,});}}}}
</script>

url: 图片地址
error：组件内部使用，不应根据此值判断上传是否成功，而应根据progress属性
progress：如果值为100，表示图片上传成功
response：上传成功后，服务器返回的数据，这是最有用的了

上传失败的情况提示，

碰到的BUG：
1、发布文章，需要上传图片（最多三张）
2、发布成功后，可以进行修改，需要把之前上传的的图片显示出来，这里用 fileList 数组存。

官方描述：

可以通过设置file-list参数(数组，元素为对象)，显示预置的图片。其中元素的url属性为图片路径

<u-upload :show-progress="false" :action="action" :form-data="formData" max-count="3"name="file" :file-list="fileList" @on-uploaded="onUploaded" @on-remove="onRemove">
</u-upload><script>
// data中定义的两个数组：
fileList:[], // 显示默认的图片，以及修改后的图片集合
imgArr:[], // 未修改的图片集合
// 把之前上传过的图片，分别存入fileList和imgArr。
item.attaches.forEach((item, index) => {this.fileList.push({path:item.path})this.imgArr.push({url:this.$imgUrl+item.path,path:item.path})
})
onUploaded(res) {this.fileList = res;
},
// 删除
onRemove(e) {this.imgArr.splice(e, 1)
},let str = [];
let medias = [];
// 编辑内容
if(this.edit == 1){// 如果item.response && item.response.code == 1，说明已经进行了修改，把修改后的 重新上传的图片url 存入str。this.fileList.forEach(item=>{if(item.response && item.response.code == 1){str.push(item.response.data.url)}})// 如果未修改的图片没有删除完，就把未删除的图片也存入 str 。if(this.imgArr.length>0){this.imgArr.forEach(item=>{if(item.path){str.push(item.path)}})}
}
</script>

这里说下为什么不能直接要用两个数组存。
这是默认一进来，自己组合数据后的fileList

如果你修改了其中一张图片，数据格式会出现错误。

Upload 上传：图片上传相关推荐

对于 React 结合 Antd 的 Upload 组件实现图片上传
一. React 结合 Antd 实现图片上传引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTyp ...
淘宝店铺上新图片上传获取请求方法
淘宝上新图片上传获取请求方法如下: 1.请求方法:POST [支持高并发同时请求] 点击获取请求key和secret Headers: 参数名称参数值是否必须示例备注 Content-Type ...
文件上传(图片上传) 大小限制的配置及注意点
文件上传(图片上传) 设置大小注意点 //检查文件是否为空if (multipartFile.isEmpty()){return "文件为空";}//检查文件大小 209715 ...
upload.js 文件图片上传
//isImgControl:缩略图片大小是否控制 //isYin:是否加水印 var isImgtemp;function uploadImgControlAndYin(isControl){isI ...
upload组件实现图片上传，图片上传，上传图片，上传头像，批量上传图片前后端逻辑
1.主要使用el-ui的upload组件.代码如下,最主要的就是将上传的文件转化为当前的url显示在页面主要代码如下,基于vue的: <template><div><e ...
html input type=file 文件上传; 图片上传; 图片闪烁
(1)input file 对话框和获取选中文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
h5 ajax php 图片上传,图片上传生成海报H5技术详解
我想很多经常做H5同学都会遇到过让用户上传照片的这种需求,那我这里给大家分享一些我常用的一些方法~废话不多时候,下面可以写一些干货,如果有更好的方法欢迎留言讨论! 首先,需要准备一些需要用到的东西. ...
java 图片上传非jsp_java问题用java代码在后台如何将jsp页面上的图片上传（是爱问知识人...
先到apache官方下载common-upload组件上传 // 新建一个SmartUpload对象 SmartUpload su = new SmartUpload(); // 上传初始化 iti ...
restapi如何传图片_iPhone传照片，不是只能用微信QQ，第二种方法很少人知道哦
有时候我们出去high完,会有小伙伴想要你拍的照片,这时候我们大部分人都会习惯用QQ.微信传送.但是微信只能一次传九张,照片多了得分几次发送.今天教大家两种别的传照片方法,第二种知道的人不多哦. 1. ...
antd 图片上传遇到的坑----图片回显（Upload）
antd 图片上传遇到的坑----图片回显(Upload) 最近又被安排了一个前端的项目,遇到了一个图片上传的问题,用的是antd的Upload组件,在这遇到的问题和大家分享一下,下网可以帮到需要的人 ...

Upload 上传：图片上传

Upload 上传：图片上传相关推荐

最新文章

热门文章