實現下面的上傳/下載/刪除功能：要求支持：【.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt】
分析上面的效果圖，分為【上傳】按鈕和【文件列表】功能：
解決步驟1：上傳按鈕
直接上代碼：
<a-uploadmultiple: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();},
}
完成！！！ 多多積累，多多收獲！！！
