<el-upload
class="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;
}
}