实现下面的上传/下载/删除功能:要求支持:【.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt】
分析上面的效果图,分为【上传】按钮和【文件列表】功能:
解决步骤1:上传按钮
直接上代码:
<a-upload
multiple
:showUploadList="false"
:before-upload="beforeUpload"
:customRequest="customRequest"
:remove="handleRemove"
accept=".pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt"
>
<a-button type="primary">
<a-icon type="upload" /> 点击上传
</a-button>
</a-upload>
1.multiple:多选,可以实现多个文件同时选中进行上传
2.showUploadList:上传后的文件列表要不要展示,由于我需要自定义文件列表,所以这个属性设置为false
3.before-upload:上传之前的函数,可以判断文件的类型限制和文件大小限制,此处只限制文件类型
4.customRequest:自定义上传函数
5.remove:删除文件的函数——此处无意义
6.accept:上传的文件格式限制
下面写一下before-upload
和customRequest
方法:
beforeUpload(file) {
const isValidType = [
'application/pdf',
'application/vnd.ms-powerpoint',
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'text/plain',
].includes(file.type);
if (!isValidType) {
this.$message.error('只支持 PDF、PPT、Word、Excel 和 TXT 格式的文件');
}
return isValidType;
},
async customRequest(data) {
const formData = new FormData();
formData.append('file', data.file);
const resData = await uploadFile(formData).then((res) => {
return res;
});
console.log(5555, resData);
if (resData) {
this.fileList.push({
uid: encodeURI(this.ossUrl + resData),
name: resData.data.split(/[/\\]/).pop(),
status: 'done',
url: encodeURI(this.ossUrl + resData),
checked:false,
});
this.$forceUpdate();
}
},
解决步骤2:文件列表功能
<div v-if="fileList.length">
<div class="btnCls">
<a-space>
<a-checkbox v-model="allChecked" @change="onAllCheckChange">全选</a-checkbox>
<a href="javascript:;" style="color:#67C23A" @click="batchDownLoad">批量下载</a>
<a href="javascript:;" style="color:red;" @click="batchDelete">批量删除</a>
</a-space>
</div>
<div v-for="item in fileList" :key="item.uid" style="margin-top:5px;">
<a-checkbox v-model="item.checked" @change="onCheckChange($event,item)">
</a-checkbox>
<a href="javascript:;" style="margin:0 10px;">{{item.name}}</a>
<a-space>
<a href="javascript:;" style="color:#67C23A" @click="downloadFile(item.url,item.name)">下载</a>
<a href="javascript:;" style="color:red;" @click="handleDelete(item)">删除</a>
</a-space>
</div>
</div>
对应的代码如下:
data(){
return{
allChecked:false,
fileList:[],
}
},
methods:{
onAllCheckChange(e){
this.allChecked = e.target.checked;
this.fileList.forEach(item=>{
item.checked = e.target.checked;
})
this.$forceUpdate();
},
onCheckChange(e,item){
item.checked = e.target.checked;
this.$forceUpdate();
let arr = this.fileList.filter(file=>file.checked);
if(arr.length==0){
this.allChecked = false;
}else if(arr.length==this.fileList.length){
this.allChecked = true;
}
},
handleDelete(item){
//删除文件
let index = this.fileList.findIndex(file=>file.url==item.url);
if(index>-1){
this.fileList.splice(index,1);
}
if(this.fileList.length==0){
this.allChecked = false;
}
},
batchDelete(){
let arr = this.fileList.filter(item=>item.checked);
if(arr.length==0){
this.$message.info('请选择要删除的文件');
return;
}
arr.forEach(item=>{
this.handleDelete(item);
})
},
batchDownLoad(){
let arr = this.fileList.filter(item=>item.checked);
if(arr.length==0){
this.$message.info('请选择要下载的文件');
return;
}
arr.forEach(item=>{
this.downloadFile(item.url,item.name);
})
},
//下载文件
downloadFile(url, fileName) {
const downloadRes = async ()=>{
try {
let response = await fetch(url);
let blob = await response.blob();
let objectURL = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = objectURL;
a.download = fileName;
a.click();
a.remove();
window.URL.revokeObjectURL(objectURL);
}catch (e) {
var element = document.createElement('a');
element.setAttribute('href', url);
element.setAttribute('download', fileName);
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
}
downloadRes();
},
}
完成!!! 多多积累,多多收获!!!