vue＋elementUI同时发送form data和Query string Parameters请求

最新推荐文章于 2024-07-28 17:46:11 发布

LoveMe_LoveMyDog

最新推荐文章于 2024-07-28 17:46:11 发布

阅读量1.8k

点赞数 3

文章标签： elementui vue javascript

本文链接：https://blog.youkuaiyun.com/LoveMe_LoveMyDog/article/details/120104072

版权

本文介绍如何在Element UI中结合Swagger实现文件上传，并同时传递QuerystringParameters参数。通过设置`:http-request`属性自定义上传方法，创建FormData对象添加文件和额外参数，然后在后台接口中接收并处理这些数据。示例代码展示了如何构造请求并覆盖默认的上传行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传文件，同时传递参数

1.先看下用swagger发的请求在这里插入图片描述
    当时我看，以前没做过，先百度下看下form data和Query string Parameters是什么意思，了解下它的基本。
    这里我就不重复它的基本定义这种了，直接整干货。
2.elementUI上传文件
    不用想，就是Upload ，自己去看了下，发现有个
在这里插入图片描述
    那我就好整了，就不用它例子里面的action了，下面上我自己的代码

<el-upload
    ref="upload"
    :limit="1"
    :before-upload="beforeUpload"
    :auto-upload="false"
    :headers="headers"
    :on-success="handleSuccess"
    :on-error="handleError"
    action="#"
    :http-request="getuploadFile"
   >

:auto-upload=“false”，手动上传， :http-request=“getuploadFile”,自己写了一个上传的方法去覆盖它原来的。
那么文件是怎么添加进去的呢？直接上代码

    getuploadFile(param){
      let fd = new FormData();
      fd.append('file', param.file); // 传文件
      uploadFile(this.myData.isUpdated,this.myData.specifyDate,fd).then(res =>{
        console.log(res);
        if(res.code == 200){
          this.handleSuccess(res.msg);
        }else{
          this.handleError(res.msg)
        }
      })
    },

用 :http-request="getuploadFile"覆盖到原来的方法后，定义的方法里面可以有一个参数，我穿件了一个FromData的对象，通过append以键值对的形式传入。当不用在Query string Parameters里面传参数，就用FromData一起把文件加参数一起传了，就多append几个。
可以看到，我的uploadFile方法，传了3个参数，前面两个就是我上传文件要传的参数，fd就是我要传的文件，最后，上这个方法的代码

//文件上传
export function uploadFile(isUpdated,specifyDate,query) {
  return request({
    url: '/item/detail/importDetailData?'+'isUpdated='+isUpdated+'&specifyDate='+specifyDate,
    method: 'post',
    data: query,
  })
}

好了这样，同时发送form data和Query string Parameters请求来上传文件，就这么的解决了。