Vue—— Vue3 文件上传下载实现

背景问题：
需要实现文件上传下载功能。

方案思考：
封装文件上传下载方法。

具体实现：
文件上传下载工具：

// utils/file.jsimport{ElMessage,ElUpload}from'element-plus'importrequestfrom'@/utils/request'// 文件上传工具类exportclassFileUploadUtil{// 上传单个文件staticasyncuploadFile(file,options={}){const{url='/upload',onProgress,headers={},params={}}=optionsreturnnewPromise((resolve,reject)=>{constformData=newFormData()formData.append('file',file)// 添加额外参数Object.keys(params).forEach(key=>{formData.append(key,params[key])})// 创建 XMLHttpRequestconstxhr=newXMLHttpRequest()// 监听上传进度xhr.upload.addEventListener('progress',(event)=>{if(event.lengthComputable&&onProgress){constprogress=Math.round((event.loaded*100)/event.total)onProgress(progress)}})// 监听上传完成xhr.addEventListener('load',()=>{if(xhr.status>=200&&xhr.status<300){try{constresponse=JSON.parse(xhr.responseText)resolve(response