一、批量上传文件
思路
创建一个数组，把需要上传的文件放到这个数组里面，最后将文件发送给后台
代码
html
<Form ref="formHandle" :model="formObj" inline :label-width="90">
<FormItem class="FormItemWidth" style="margin-bottom:10px" label="上传附件：" prop="code">
<Upload
:show-upload-list="false"
:before-upload="handleBeforeUpload"
type="drag"
multiple
action=""
class="uploadFile">
<span class="choseFile">上传</span>
</Upload>
</FormItem>
<p class="file-tip">支持.xlsx .xls .doc .docx .png .jpg .pdf</p>
<div class="file-list-box" v-show="formObj.fileArr.length > 0">
<ul class="file-list">
<li class="file-item" v-for="(list,index) in formObj.fileArr" :key="index">
<span >文件名: {{ list.name }}</span>
<Icon class="file-delete" type="ios-close" size="15" color="red" @click="removeFile(index)"></Icon>
</li>
</ul>
</div>
</Form>
数据
formObj: {
fileArr: [],
},
fileMaxTip: false,
方法
// 文件上传
handleBeforeUpload (file) {
// 文件类型校验
let type = (file.name.substr(file.name.lastIndexOf("."))).toLowerCase(); // .jpg
let imgType = type.split('.')[1] // jpg
let imgFileTypeArr = ['jpg','jpeg','png','xlsx','xls','doc','docx','pdf']
let checkType = imgFileTypeArr.some((item) => {
return item === imgType
})
if (!checkType) {
this.$Message.info('只支持.xlsx .xls .doc .docx .png .jpg .pdf格式');
return false
}
// 文件大小校验
const checkMax = file.size < 5242880;
if(!checkMax){
this.$Message.info('单个文件不能大于5MB');
return false;
}
// 文件名称重复校验
let nameArr = this.formObj.fileArr.map((item) => {
return item.name
})
let isRepeat = nameArr.indexOf(file.name)
if (isRepeat !== -1) {
this.$Message.info('文件名称不能重复');
return false;
}
if (this.formObj.fileArr.length >= 10) {
this.fileMaxTip = true
return false;
}
this.formObj.fileArr.push(file);
return false;
},
removeFile (index) {
this.formObj.fileArr.splice(index, 1);
},
接口
// 文件上传
setFileList () {
let formData = new FormData();
for (let i = 0; i < this.formObj.fileArr.length; i++) {
formData.append("file", this.formObj.fileArr[i]); // 文件对象
}
// 其他参数
// formData.append("type", 1);
api.feedbackManage.feedbackUpload(formData).then(res => {
if (res.status === 200) {
this.formObj.fileArr = []
}
}).catch(() => {
});
},
最多上传10文件校验提示
watch: {
// 如果有弹窗，回显，注意清空文件数组
fileMaxTip (newVal) {
if (newVal) {
this.$Message.info('每次最多只能上传10个文件');
setTimeout(() => {
this.fileMaxTip = false
}, 2000)
}
}
},
二、如果有回显文件及删除
思路
将需要删除的文件放进一个数组，执行操作时调去后台批量删除的接口
代码
仅补充需要的代码，其余功能同上
html
<div class="file-list-box" v-show="formObj.fileArr.length > 0 || backFileList.length > 0">
<ul class="file-list">
<!-- 回显 -->
<li class="file-item" v-for="(file,index) in backFileList" :key="index">
<span >文件名: {{ file.fileName }}</span>
<Icon class="file-delete" type="ios-close" size="15" color="red" @click="deleteFile(index)"></Icon>
</li>
<!-- 上传 -->
<li class="file-item" v-for="(list,index) in formObj.fileArr" :key="index">
<span >文件名: {{ list.name }}</span>
<Icon class="file-delete" type="ios-close" size="15" color="red" @click="removeFile(index)"></Icon>
</li>
</ul>
</div>
数据
backFileList: [], // 回显文件列表
deleteFileArr: [],
方法
// 回显文件
// 当调去详情接口后赋值，并根据具体字段显示在HTML代码中
this.backFileList = res.data[0].fileArchiveList || []
// 删除文件
deleteFile (index) {
let deleteFile = this.backFileList.splice(index, 1);
this.deleteFileArr.push(deleteFile[0])
},
接口
deleteFileApi () {
let ids = ''
let tempArr = []
if (this.deleteFileArr.length > 0) {
tempArr = this.deleteFileArr.map((item) => { return item.fileId })
ids = tempArr.join(',')
}else {
return false
}
const params = { ids }
let postData = this.$qs.stringify(params)
api.feedbackManage.feedbackDelete(postData).then(res => {
if (res.status === 200) {
this.deleteFileArr = []
}
}).catch(() => {
this.deleteFileArr = []
this.$Message.error('删除文件失败');
})
}
样式
.file-list-box {
border: 1px solid #dddddd;
border-radius: 4px;
margin: 0 10px 10px;
padding: 10px;
.file-item {
span, .file-delete {
display: inline-block;
vertical-align: middle;
}
.file-delete {
cursor: pointer;
}
}
}
.file-tip {
margin: 5px 0;
}
注意事项
文件上传一定要做防抖，防止用户多次点击，否则开销非常大。
防抖
用户在3秒钟内点击只生效一次，时间可调节。
多添加StopBtn变量，可在多个事件上添加防抖
// 防抖 3秒钟
stopTime: 3000,
fileStopBtn : false, // 文件
if (this.fileStopBtn === false) {
this.fileStopBtn = true
setTimeout(() => {
this.fileStopBtn = false
}, this.stopTime)
// 接口请求
}
