一篇了解element-ui的文件上传文件上传逻辑携带token将文件上传到文件服务器。上传成功服务器返回fileId和fileName，上传失败返回失败码，file下载逻辑根据fileId调用接口获取二进制流文件，根据fileName的后缀获取文件类型,并根据文件类型生成二进制文件。在上传其他逻辑文件之前，需要先判断上传的文件类型（文件后缀）和文件大小是否超过限制。遇到的问题简单不解释如下：1.文件上传需要携带token，放在header中。解决方案;使用el-upload提供header即可data(){return{headers:{token:"111"}}}问题2.如果预览图片时图片不存在,可能返回二进制json文件流需要特殊处理判断预览时返回的二进制流,handlePreview(file){//console.log('要预览的文件是：',file)//获取文件id和服务器名称返回的文件constfileId=file.response.body.fileIdconstfileName=file.response.body.fileNameaxios.post(this.DOWNLOAD_URL,{body:{fileId:fileId}},{//设置标题并返回axiosheaders的数据类型：this.headers,responseType:'blob'}).then(res=>{//如果找不到文件，可能会返回二进制格式的json信息，需要处理//通常，将返回所需的二进制文件if(this.handleMessage(res)){//正常情况下处理二进制文件varfileType=this.getFileType(fileName)if(fileType==='image'){this.向下图像e(res.data,fileName)}else{console.info('非图片格式暂时无法预览')}}})},handleMessage(res){//未处理的响应对象，如果是普通二进制流文件返回true，如果是二进制json文件则返回false并显示json内容if(res.data&&res.data.type){if(res.data.type==='application/octet-stream'){//正常二进制流文件returntrue}elseif(res.data.type==='application/json'){//异常二进制JSON文件constreader=newFileReader()reader.readAsText(res.data,'utf-8')reader.onload=e=>{constresult=JSON.parse(reader.result)constmessage='资源文件下载失败'+reader.resultconsole.error('资源文件下载失败:',result)this.$message({message:message,type:'error',duration:5*1000})}returnfalse}}else{console.error('函数输入参数响应对象应该是一个完整的对象，应该包含data.type属性')}},getFileType(fileName){//更多文件类型参考https://www.cnblogs.com/zhongcj/archive/2008/11/03/1325293.htmlconstarr=fileName.split('.')constlen=arr.lengthletstr=''if(len>1){constallowedImageType=this.allowedImageType||['jpg','jpeg','png']constallowedVideoType=this.allowedVideoType||['mp4']constfileType=arr[arr.length-1].toLocaleLowerCase()if(allowedImageType.includes(fileType)){str='image'}elseif(allowedVideoType.includes(fileType)){str='video'}}returnstr},downImage(blobData,fileName){constblob=newBlob([blobData],{type:'image/jpeg'})constreader=newFileReader()reader.readAsDataURL(blob)阅读器。onload=e=>{consturl=URL.createObjectURL(blob)//获取url直接显示在页面上}}，问题3.el-上传组件显示上传成功，但是上传失败。问题原因：element-ui中的上传组件是根据httpCode判断的。如果是httpCode<200||httpCode>=300，则判断为上传失败。其他情况则标记为上传成功但是开发过程中并没有处理httpCode，而是根据responseBody中的code字段进行判断。虽然我也觉得用httpCode更合适，但是很多时候是通过响应body中的code来判断的（可能是后面的同事不知道怎么处理httpCode吧？）handleSuccess(res,file,fileList){//上传成功函数的res是responseBody的body//处理element-ui认为上传成功（通过httpCode200判断为成功），实际上传失败(通过responseBody判断)if(res.code&&res.code!==0){//如果上传不成功，会给出提示信息this.$message({message:res.message||'error',type:'error',duration:5*1000})this.$nextTick(function(){//删除上传失败的文件，code0表示成功constsuccessFileList=fileList.filter(ele=>{returnele.response.code+''==='0'})//将列表重置为正确的列表//this.fileList=successFileList//假的上传成功也需要处理一次this.$emit('my-update',successFileList)})}}，问题4.如何在封装el-upload的自定义组件中获取最新上传的文件列表使用自定义v-model解决获取上传文件的问题组件最外层文件上传文件列表//在自定义组件中，设置v-modelexportdefault{model:{prop:'fileList',event:'my-update',},props:{//Arrayofelement-ui上传组件fileList文件列表:{type:Array,default(){return[]},},},methods:{//监听ele-upload的change事件。根据文档，只添加文件，当上传成功或上传失败时，handleChange(file,fileList){//console.log('Thefilehaschanged',file,fileList)this.$emit('my-update',fileList)},//删除文件后，需要同步触发事件handleRemove(file,fileList){constfileId=file.response.body.fileId//console.log('executedeleteevent,fileidtobedeleted',fileId,fileList)constselectedFileList=fileList.filter(ele=>{returnfileId!==ele.response.body.fileId})//console.log('删除的文件列表：',selectedFileList)this.$emit('my-update',selectedFileList)},//同时也需要在false上传成功时执行一次处理},}<上传框v-model="uploadFileList"/>
