vue+element-ui中 使用multipart上传文件

以前做上传图片功能跟后端对接都是先把图片上传到oss ，然后把返回的url传给后端，这次后端说要传给他文件流的格式，要用'multipart/form-data'方式。 以前从来没做过，网上查资料，然后自己折腾了好久，踩了不少坑，终于做出来了， 特此记录一下。

<!-- 使用elements-ui的上传组件 -->
<template>
    <el-upload
    class="upload-demo"
    ref="upload"
    action="/"
    :on-change="uploadFile"
    :auto-upload="false"
    :show-file-list="false">
    <el-button slot="trigger" size="small" type="primary">上传图片</el-button>
    <div slot="tip" class="el-upload__tip">请上传JPG、JPEG、PNG，大小不超过2M</div>
    </el-upload>
    
    <el-button @click.native="submitForm" type="primary">提交</el-button>
</template>

上传方法

   uploadFile(file) {
      this.imgUrl = file.raw // 拿到文件的信息
   },

最后提交的时候需要注意下，要把格式转为 FormData 格式

还有请求头需要设置为 multipart/form-data

 

submitForm() {
    let formdata = new FormData()
    formdata.append(imgUrl, this.imgUrl)
    api.submit(formdata )// ...这边就是提交给后台的api了
}

/* 请求头
    headers: {
        'Content-Type': 'multipart/form-data'
      }
*/