multipart/form-data类型携带文件同时携带额外参数

无聊前端苟
542 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天

正常前端向后端提交文本数据时，请求头的Conntent-Type一般都是为:application/json;而上传文件时，请求头的Conntent-Type必须改为:multipart/form-data才能上传文件。

image.png

前端要上传文件到服务器，需要借助到FormData对象，下面简单介绍一下FormData的用法，再说明如何携带文件对象外的额外参数。

  1. 创建一个FormData空对象实例
 const fd = new FormData();
  1. 调用fd对象的append方法，往fd身上添加数据
 fd.append('file', file)

append的第二个参数，即为我们上传文件拿到的文件对象，如下图所示

image.png

至此我们就已经处理好了提交的文件对象数据了，下一步骤就是发起接口调用就可以了

不使用组件时，携带额外参数的方法如下:

fd.append('file', file) //正常携带的文件对象参数
fd.append('param', param)  // 额外的参数值

elementUI中的upload组件想要额外携带参数的也是有方法的。从element文档可以发现有个data属性专门用来携带额外的参数值的

image.png

具体用法如下:

  • 首先使用elementUI的上传组件
<el-upload
    ref="upload"
    :multiple="false"
    :show-file-list="false"
    :limit="1"
    accept=".xlsx, .xls"
    :disabled="upload.isUploading"
    :data="upload"
    :headers="upload.headers"
    :action="upload.url"
    :on-progress="handleFileUploadProgress"
    :on-success="handleFileSuccess"
    class="import"
/>

需要注意的是 :data=upload.deptId，额外携带的参数就是通过upload携带过去给后端的

  • 再data内对应声明如下代码即可
data(){
    upload:{
        deptId:"110"
    }
}

至此，使用elementUI的upload组件上传时携带额外参数就已经完成了，当我们上传文件时，文件就会自动按照我们设置的action值提交到服务器，提交时参数是如下我们携带的两个值

image.png

avatar
文章
阅读
粉丝