news 2026/8/2 3:02:42

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/31 23:36:00

UAssetGUI完全指南:5分钟掌握游戏资源JSON转换技巧

UAssetGUI完全指南:5分钟掌握游戏资源JSON转换技巧 【免费下载链接】UAssetGUI A tool designed for low-level examination and modification of Unreal Engine 4 game assets by hand. 项目地址: https://gitcode.com/gh_mirrors/ua/UAssetGUI UAssetGUI是…

作者头像 李华
网站建设 2026/8/1 11:41:15

网盘直链下载助手使用指南

网盘直链下载助手是一个基于JavaScript开发的浏览器扩展,专门用于获取各大网盘文件的真实下载地址。该项目基于原版"网盘直链下载助手"进行修改,去除了推广内容,无需输入暗号即可使用,在功能和体验上都有显著提升。 【免…

作者头像 李华
网站建设 2026/8/1 5:28:54

WorkshopDL:突破平台限制的Steam创意工坊下载神器

WorkshopDL:突破平台限制的Steam创意工坊下载神器 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 还在为无法下载Steam创意工坊模组而烦恼?无论你是Epic…

作者头像 李华
网站建设 2026/8/1 20:06:05

交易首页---

文档核心项分值权重AI评分问题清单优化建议评分证据标题结构规范性3526问题1:标题层级跳跃,缺少1.1.2.4及以上层级的逻辑归属(位置:1.1.2.3后);问题2:…建议1:补全层级编号体系&…

作者头像 李华
网站建设 2026/7/31 12:33:55

Java毕设项目推荐-基于Springboot+vue社区老人健康信息管理系统设计与实现基于springboot的老人健康信息管理系统的设计与实现【附源码+文档,调试定制服务】

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

作者头像 李华
网站建设 2026/8/1 1:35:10

Steam创意工坊下载终极指南:如何免账号获取任何游戏模组

Steam创意工坊下载终极指南:如何免账号获取任何游戏模组 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否在GOG或Epic平台购买了游戏,却无法享受St…

作者头像 李华