el-upload上传多条一次性上传
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了el-upload上传多条一次性上传相关的知识,希望对你有一定的参考价值。
参考技术A <el-uploadclass="specialinput"
ref="upload"
multiple
:limit="4"
:on-preview="handlePreview"
:on-change="handleChange"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:file-list="imgList"
list-type="picture-card"
:http-request="uploadFile"
:auto-upload="false">
<i class="el-icon-plus"></i>
</el-upload>
// 上传文件
uploadFile(file)
this.fileData.append('files', file.file); // append增加数据
,
// 上传到服务器
submitUpload()
if (this.imgList.length === 0)
this.$message(
message: '请先选择文件',
type: 'warning'
)
else
const isLt100M = this.imgList.every(file => file.size / 1024 / 1024 < 100);
if (!isLt100M)
this.$message.error('请检查,上传文件大小不能超过100MB!');
else
this.fileData = new FormData(); // new formData对象
this.$refs.upload.submit(); // 提交调用uploadFile函数
this.$axiosPost(
this.paidanurl + this.paidanport + '/api/Dispatch/UploadImage?flowid='+ this.operaInfo.flowid + '&recordid=' + this.recordid,this.fileData,function(data)
if (data.Code == 1)
this.imgList = [];
this.$message.success(data.Message);
else
this.$message.error(data.Message);
,
function(error)
);
,
//移除
handleRemove(file, imgList)
this.imgList = imgList;
,
// 选取文件超过数量提示
handleExceed(files, imgList)
this.$message.warning(`当前限制选择 4 个文件,本次选择了 $files.length 个文件,共选择了 $files.length + imgList.length 个文件`);
,
//监控上传文件列表
handleChange(file, imgList)
let existFile = imgList.slice(0, imgList.length - 1).find(f => f.name === file.name);
if (existFile)
this.$message.error('当前文件已经存在!');
imgList.pop();
this.imgList = imgList;
以上是关于el-upload上传多条一次性上传的主要内容,如果未能解决你的问题,请参考以下文章
el-upload动态绑定file-list,多个上传时只返回一次成功回调