news 2026/7/2 7:21:06

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Avue2图片上传使用object对象模式时,axios的请求模式用post还是get?

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

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(()=>{});

请注意,上述代码使用到的是axios.post,这样checkout_attachment以表单对象数据提交给后端,方面后续数据的存储使用。

不推荐的方式

使用axios.get方式的不便之处,当上传多个文件时,get方法会将checkout_attachment以string数组(array)方式上传,后端接收后需要额外转码才能存储在结构数据中,相比使用post麻烦。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/1 15:23:23

新手教程:使用电路仿真软件进行直流分析实战

从零开始玩转电路仿真:手把手教你用直流分析“透视”电路真相你有没有过这样的经历?焊好一个放大电路,通电后却发现输出不是饱和就是截止,万用表测了半天也搞不清问题出在哪。更糟的是,换电阻、调电源一顿操作猛如虎&a…

作者头像 李华
网站建设 2026/7/1 21:05:23

PCB线宽和电流的关系:电源布线设计全面讲解

PCB线宽与电流怎么配?电源布线设计的硬核实战指南你有没有遇到过这样的情况:板子焊好上电,没跑多久走线就发烫,甚至铜箔起泡、断路?或者调试时发现MCU莫名其妙复位,最后查到是供电末端电压掉得太狠&#xf…

作者头像 李华
网站建设 2026/7/1 23:36:50

K-RPA Lite快速安装与试用指南

1. 环境与登录 1.1 安装程序 环境要求 类型说明操作系统Windows/Windowsxp/2003/2008/2012/2016/7/8/10等微软认证操作系统;硬件环境硬盘大小 10GB 或以上 CPU 2 GHz 32 bit 或以上 内存 2GB 或以上 操作系统:Windows 7/ 10、linux、unix特性说明绿色…

作者头像 李华
网站建设 2026/7/1 9:23:49

CTF-NetA终极指南:从零掌握流量分析的5个关键场景

CTF-NetA终极指南:从零掌握流量分析的5个关键场景 【免费下载链接】CTF-NetA 项目地址: https://gitcode.com/gh_mirrors/ct/CTF-NetA 当你第一次面对CTF竞赛中的流量分析题目时,是否感到无从下手?那些密密麻麻的数据包、复杂的协议格…

作者头像 李华
网站建设 2026/7/1 8:21:55

xxxx撒大大

文档核心项分值权重AI评分问题清单优化建议评分证据标题结构规范性3526问题1:层级跳跃,1.1财富星下直接跳至1.1.1.1未签约产品详情,缺少1.1.2等中间层级(位置:目录结构);问题2:标题“…

作者头像 李华