news 2026/8/7 21:17:10

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/8/7 9:49:30

OpenCore Legacy Patcher终极指南:轻松让老旧Mac运行最新系统

OpenCore Legacy Patcher终极指南:轻松让老旧Mac运行最新系统 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为你的老旧Mac无法安装最新macOS系统而烦恼吗…

作者头像 李华
网站建设 2026/8/7 23:58:48

Windows AirPods电量管理终极方案:告别盲猜,精准掌控每一格电

还在为Windows电脑上看不到AirPods具体电量而烦恼吗?每次连接后只能看到"已连接"状态,却不知道左右耳机和充电盒还剩多少电?AirPodsDesktop这款开源工具正是你的救星,让Windows用户也能享受与Mac用户相同的智能体验&…

作者头像 李华
网站建设 2026/8/6 21:31:12

DeTikZify:3分钟让手绘草图变身高品质LaTeX图表

DeTikZify:3分钟让手绘草图变身高品质LaTeX图表 【免费下载链接】DeTikZify Synthesizing Graphics Programs for Scientific Figures and Sketches with TikZ 项目地址: https://gitcode.com/gh_mirrors/de/DeTikZify 还在为论文图表制作耗费数小时&#xf…

作者头像 李华
网站建设 2026/8/7 23:01:42

WorkshopDL终极指南:3步轻松获取1000+款游戏模组

WorkshopDL终极指南:3步轻松获取1000款游戏模组 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否曾在非Steam平台玩游戏时,对Steam创意工坊里琳琅满…

作者头像 李华
网站建设 2026/8/7 11:18:48

Python金融数据利器:mootdx通达信数据读取完整指南

mootdx是一款基于Python的开源工具,专门用于读取通达信金融数据。无论你是金融数据分析新手还是量化交易爱好者,mootdx都能为你提供简单高效的解决方案,让复杂的金融数据处理变得触手可及。 【免费下载链接】mootdx 通达信数据读取的一个简便…

作者头像 李华
网站建设 2026/8/8 3:28:23

如何快速获取中国行政区划数据:从新手到专家的完整指南

中国行政区划数据是地理信息系统(GIS)应用中的基础数据,对于学术研究、商业分析和政府规划都具有重要价值。ChinaAdminDivisonSHP项目提供了完整的四级行政区划矢量数据,采用ESRI Shapefile格式,包含国家、省、市、区/…

作者头像 李华