elementUI el-upload 上传单个文件及多个文件总结
一、单个文件时：
<el-upload
class="upload-demo"
ref="uploadSingle"
drag
:action="uploadUrl"
:data={
Userid:Userid,Username:Username,AllCount:1,RecCount:1,OverFlag:1}
:show-file-list="true"
:on-progress="handleProgress"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-change="changeUploadStatus"
:on-error="handleError"
:disabled="leaveFlag"
accept="txt"
>
<i class="el-icon-box upload-icon"></i>
</el-upload>
自动上传时，这里的:data里的参数在一选定文件的时候就已经定了，无法在回调函数中逐一改变
getCaption(obj){
let index=obj.lastIndexOf("\.");
obj=obj.substring(index+1,obj.length);
return obj;
},
handleProgress(event,file,fileList){
this.AllCount=fileList.length;
this.leaveFlag=true;//上传时不允许离开标识
},
changeUploadStatus(file, fileList){
this.AllCount=fileList.length;
},
handleError(err, file, fileList){
this.leaveFlag=false;//上传失败后的允许离开标识
this.$message.error('上传文件失败，请重新上传!');
},
handleAvatarSuccess(res, file) {
this.leaveFlag=false;//上传成功后的允许离开标识
if(res.code===200&&res.SuccessFlag==1){
this.$message({
message: '上传成功!',
type: 'success'
});
}
this.$refs.uploadSingle.clearFiles();//上传成功后清空文件列表
this.selectScienceList();//重新查询列表
},
beforeAvatarUpload(file) {
console.log("AllCount",this.AllCount);
let fileType = this.getCaption(file.name);
const isDCM = fileType === 'txt';
const isLt2M = file.size / 1024 / 1024 < 30;
if (!isDCM) {
this.$message.error('上传文件只能是txt格式!');
}
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 30MB!');
}
return isDCM && isLt2M;
},
这里写了一个上传文件时要点击其他路由时来一个弹框提醒
beforeRouteLeave(to, from, next) {
let self=this;
if(self.leaveFlag){
self.$confirm('正在上传，请勿离开！', '提示', {
confirmButtonText: '确定',
cancelButtonText: '坚决离开',
type: 'warning'
}).then(() => {
next(false)
}).catch(() => {
next(true)
});
}else{
next(true)
}
},
二、上传多个文件时
项目需求：多个文件上传请求，每个上传文件请求中携带参数：文件总数、当前文件为第几个、不为最后一个文件的传参数OverFlag=0，为最后一个文件的传参数OverFlag=1
<el-upload
class="upload-demo"
ref="upload"
drag
:action="uploadUrl"
:http-request="httpRequest"
:show-file-list="true"
:auto-upload="false"
:on-progress="handleProgress"
:on-success="handleAvatarSuccessMul"
:before-upload="beforeAvatarUpload"
:on-change="changeUploadStatus"
:on-error="handleErrorMul"
:disabled="leaveFlag"
accept="txt"
multiple>
<i class="el-icon-box upload-icon"></i>
</el-upload>
<el-button style="margin-left: 10px;position: absolute;top: 0;" size="small" type="success" @click="submitUpload">上传文件</el-button>
与单个文件上传的不同，:data传参无法实现现有需求，所以要写http-request来自定义上传，:auto-upload="false"自动上传需改为手动上传
data(){
return{
Userid:1,
Username:'张三',
OverFlag:0,
AllCount:0,
RecCount:0,
}
}
getCaption(obj){
let index=obj.lastIndexOf("\.");
obj=obj.substring(index+1,obj.length);
return obj;
},
handleProgress(event,file,fileList){
this.AllCount=fileList.length;
this.leaveFlag=true;
},
changeUploadStatus(file, fileList){
this.AllCount=fileList.length;
},
handleErrorMul(err, file, fileList){
console.log('err',err);
},
handleAvatarSuccessMul(res, file) {
},
httpRequest(param) {
console.log(param)
let fileObj = param.file // 相当于input里取得的files
let recCount=++this.RecCount;
console.log('this.$refs.upload.uploadFiles',this.$refs.upload.uploadFiles.length);
//文件总数可以使用this.$refs.upload.uploadFiles.length
if(recCount==this.AllCount){
this.OverFlag=1;
}
let fd = new FormData()// FormData 对象
fd.append('file', fileObj)// 文件对象
fd.append('Userid', this.Userid)
fd.append('Username', this.Username)
fd.append('AllCount', this.AllCount)
fd.append('RecCount',recCount)
fd.append('OverFlag', this.OverFlag)
let config = {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
//这里可以解决自定义上传时没有进度条的问题
let percent=(progressEvent.loaded / progressEvent.total * 100) | 0
//调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
param.onProgress({
percent:percent})
}
}
axios.post(this.uploadUrl, fd, config).then(res=>{
param.onSuccess()//自定义上传时，需自己执行成功回调函数
if(res.data.code==200 && res.data.SuccessFlag==1){
this.$refs.upload.clearFiles();
this.$message({
message: '上传成功!',
type: 'success'
});
this.selectScienceList();
this.leaveFlag=false;
}
}).catch((err)=>{
//上传失败 调用onError方法
//处理自己的逻辑
param.onError();//自定义上传时，需自己执行上传错误回调函数
this.$refs.upload.clearFiles();
this.$message.error('上传文件失败，请重新上传!');
this.leaveFlag=false;
})
},
beforeAvatarUpload(file) {
let fileType = this.getCaption(file.name);
console.log(fileType);
const isDCM = fileType === 'txt';
const isLt2M = file.size / 1024 / 1024 < 30;
if (!isDCM) {
this.$message.error('上传文件只能是txt格式!');
}
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 30MB!');
}
return isDCM && isLt2M;
},
submitUpload() {
if(this.AllCount===0){
this.$message.error('请先选择文件!');
}else{
this.leaveFlag=true;
this.RecCount=0;
this.OverFlag=0;
this.$refs.upload.submit();
}
},
效果图：左边为多文件、右边为单个文件
