项目场景：

在后台管理系统上传图片时，使用自定义的上传方法

问题描述

用element-ui + vue2.0上传多张图片，并使用自定义方法时，无法获取上传进度和上传完成后的图片列表，想要获取上传完成之后的列表

<el-upload :action="actionUrl"multipleref="uploadPic"accept="image/jpeg, image/png, image/jpg"list-type="picture-card":http-request="(e) => {uploadFile(e, row)}":on-success="(response, file, fileList) => {uploadSuccess(fileList, row)}":on-remove="(file, fileList) => {removeFileList(fileList, row)}":file-list="row.imageCos || []"><i class="el-icon-plus"></i></el-upload>

 uploadFile({file, onProgress, onSuccess, beforeUpload}, row) {uploadPic(file, progress => {onProgress(progress)}).then(res => {onSuccess({name: res.name,url: res.url,})})},uploadSuccess(fileList, row) {this.$set(row, 'imageCos', fileList)},removeFileList(fileList, row) {this.$set(row, 'imageCos', fileList)},

原因分析：

看el-upload的源码得知，在自定义的http-request的函数中，有以下几个传参

post(rawFile) {const { uid } = rawFile;const options = {headers: this.headers,withCredentials: this.withCredentials,file: rawFile,data: this.data,filename: this.name,action: this.action,onProgress: e => {this.onProgress(e, rawFile);},onSuccess: res => {this.onSuccess(res, rawFile);delete this.reqs[uid];},onError: err => {this.onError(err, rawFile);delete this.reqs[uid];}};const req = this.httpRequest(options);this.reqs[uid] = req;if (req && req.then) {req.then(options.onSuccess, options.onError);}},

headers、file、filename、data、action、onProgress、onSuccess、onError这几个参数可以获取，调用onProgress和onSuccess就可以实现上传进度和上传成功监听

解决方案：

上传时调用onPressgress回调，上传成功后调用onSuccess回调，在调用el-upload on-success属性，获取上传成功的列表。

<el-upload :action="actionUrl"multipleref="uploadPic"accept="image/jpeg, image/png, image/jpg"list-type="picture-card":http-request="(e) => {uploadFile(e, row)}":on-success="(response, file, fileList) => {uploadSuccess(fileList, row)}":on-remove="(file, fileList) => {removeFileList(fileList, row)}":file-list="row.imageCos || []"><i class="el-icon-plus"></i></el-upload>

uploadFile({file, onProgress, onSuccess, beforeUpload}, row) {uploadPic(file, progress => {onProgress(progress)}).then(res => {onSuccess({name: res.name,url: res.url,})})},uploadSuccess(fileList, row) {this.$set(row, 'imageCos', fileList)},removeFileList(fileList, row) {this.$set(row, 'imageCos', fileList)},

el-upload使用自定义上传，获取上传进度和上传成功回调相关推荐

拖拽上传获取上传文件信息,e.dataTransfer.files始终为空的解决方案
2019独角兽企业重金招聘Python工程师标准>>> 项目中需要做一个拖拽文件上传功能,遇到获取文件e.dataTransfer.files始终为空的情况,多次尝试,终于找到如下解 ...
php截断上传,截断在文件包含和上传中的利用
截断大概可以在以下情况适用 include(require) file_get_contents file_exists 所有url中参数可以用%00控制 0x01. 本地文件包含1.1 截断类型:p ...
实现前后台数据交互（上传/回传单个JSON数据和上传/回传JSON数组）
一.上传单个JSON数据所需jar文件: 创建JSON实体类: package domain;public class Data1 {private String name;private Stri ...
熹妃传获取服务器信息,熹妃传阅历怎么获取_熹妃传阅历获取攻略_手心游戏
熹妃传阅历是用来升级技能的,所点技能越高,阅历消耗得越多.熹妃传阅历不够了怎么办?阅历怎么获取呢?接下来就由小编为大家带来熹妃传阅历获取攻略. 熹妃传阅历获取攻略 1.当差,让随从当差抄经来获取阅历. ...
后台传给前台的进度条传百分比数据
要求:前后2端的比例是中间长度的50%可以传入一个最小值,一个数组(这个数组里面的数字可以是任意个)和一个最大值,改变最小值也可以直接传入初始的百分比 import java.text.Decimal ...
HTML5网页录音和上传到服务器，支持PC、Android，支持IOS微信
准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时 ...
使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
element upload获取上传成功的图片地址
关于upload获取上传成功的图片地址记录一个坑,在项目中用到了element的图片上传, 文档里的室这么写的获取图片的url handleAvatarSuccess(res, file) { th ...
el upload ajax,Upload 上传 el-upload 上传配置请求头为Content-Type: multipart/form-data
api接口处添加属性 (标红处) // 校验台账 export const checkEquiment = (data) => { return axios({ url: '/job/equip ...

el-upload使用自定义上传，获取上传进度和上传成功回调

项目场景：

问题描述

原因分析：

解决方案：

el-upload使用自定义上传，获取上传进度和上传成功回调相关推荐

最新文章

热门文章