当前位置：首页 > news >正文

a-upload组件实现文件的上传——.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt

news 来源：原创 2025/5/1 5:35:31

实现下面的上传/下载/删除功能：要求支持：【.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();},
}