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

Avue2图片上传使用object对象模式时，axios的请求模式用post还是get？

news 2026/9/1 15:07:33

Upload对象如下：

/** * 上传附件 * @param {*} vueObj * @param {*} row * @returns */exportconstuploadOnlyOption=(vueObj,row)=>{return{tip:true,// border: true, //显示边框labelWidth:120,//操作菜单栏的宽度span:12,submitBtn:false,emptyBtn:false,menuBtn:false,detail:false,column:[{row:true,span:24,label:"结账附件",prop:"checkout_attachment",type:"upload",listType:"picture-card",// listType: "text",// dragFile: true, //拖拽上传accept:"image/png, image/jpeg, image/gif, application/pdf,application/x-zip-compressed,.rar,application/x-rar-compressed,application/x-7z-compressed,application/x-bzip,application/x-bzip2",limit:10,fileSize:10000,dataType:"object",span:24,fileText:"选择附件",loadText:"上传附件中...",props:{label:"name",value:"url",},propsHttp:{res:"data",// home: "domain",name:"name",url:"url",},canvasOption:{text:" ",ratio:0.3,},tip:"上传“jpg/png/pdf/压缩包”格式的文件，最多10个，且不超过10M，重新上传时请记住点击提交按钮保存！",action:vueObj.attachUploadUrl,uploadPreview:(file,column,done)=>{letpreviewType=["jpg","jpeg","gif","bmp","png"];letsuffix=file.url.substring(file.url.lastIndexOf(".")+1);if(previewType.includes(suffix.toLowerCase())){done();//默认执行预览}else{vueObj.$confirm("该文件无法预览，可以下载后查看。","提示",{confirmButtonText:"下载",cancelButtonText:"取消",}).then(()=>{vueObj.$downloadFile(file.url,file.name);}).catch(()=>{});}},},],};};

dataType用object对象，支持name,url,label,value等多对象属性上传，方便后端数据存储。

上传操作方法如下：

uploadRecordDetailError(error,column){this.$message.error(error+"！");},uploadRecordDetailExceed(limit,files,fileList,column){if(fileList.length>=limit){this.$message.error(`上传文件数量不能超过${limit}个！`);}},uploadRecordDetailBefore(file,done,loading,column){// console.log(file, column);letsuffix=file.name.substring(file.name.lastIndexOf(".")+1);if(column.accept.indexOf(file.type)>=0||suffix.toLowerCase()=="rar"){done();}else{this.$message.error(`请先上传${column.accept}文件！`);loading();}},uploadRecordDetailAfter(res,done,loading,column,){// console.log(res, this.model);letuploadFile={attachPath:res.url,attachName:res.name,};done();// this.$message.success("上传后的方法");},uploadRecordDetailDelete(file,column){// console.log(file, column);returnnewPromise((resolved,reject)=>{resolved("success");});},//下载附件downAttachFile(file){this.$downloadFile(file.url,file.name);},

提交上传方法：

this.$confirm("是否上传!","提示",{confirmButtonText:'确认',cancelButtonText:'取消',type:'warning'}).then((data)=>{axios.post(this.checkoutUrl,{_csrf,id:this.mainData.id,checkout_attachment:this.mainData.checkout_attachment,},).then((res)=>{if(res.status==200&&res.data.code===0){this.$emit("reload");this.$message({type:"success",message:"上传成功!",});this.close();}else{this.$message({type:"error",message:"执行操作出错!",});}});}).catch(()=>{});