最近接手了一个重构前端页面的项目, 后台只提供api接口, 需要使用前端的vue框架中的Upload进行上传文件, 并携带两个参数, 同时还需要在请求头中设置userId
查找了很多资料, 使用原生的上传也是可以的 , 只是之前没有注意到userId这事, 导致发送请求时总是报错500(internal server error)

接下来看一下如何使用Upload标签实现点击/拖拽上传
如何携带参数, 如何设置headers

<template>
  <div>
    <Row>
      <Col>
        <Upload
          multiple
          type="drag"
          :data="submitData"
          :headers="upHeaders"
          action="/api/cs-dzjf-soa/api/v1/file/upload"
        >
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽到此处上传</p>
          </div>
        </Upload>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  name: "first",
  data() {
    return {
      submitData: { // 这里是需要携带的数据
        srcLanguage: "en",
        tgtLanguage: "zh"
      },
      upHeaders: { // 这里设置的是请求头中的userId, 用于鉴权的
        "userId": "fffffffffffffffffffffffffff"
      }
    };
  },
};
</script>

效果图如下

Upload标签中配置的:data就是用于携带参数的, :headers是用于携带头信息的, 请求的url地址中开头位置的api是用于解决跨域的, 具体如何在前端解决跨域参考 前端解决跨域

**这里在headers中不需要配置Content-Type: multipart/form-data, 多此一举

后期补充的问题:
Upload中默认上传时的格式是

file: (binary)

这里现在使用的后台接口中, 用于接收上传文件的字段是是data, 那么这时候就需要在前台修改一下Upload默认的键名, 百度一番之后, 无果, 决定找一下源码看看, 源码也没找到有用的信息, 在一个github项目上找到了点信息
github地址

看到这句话 是不是觉得好像有点对症呢???没错, 就是这里可以设置

在这配置上name属性之后, 我们重新上传一下文件试试

现在已经成功的修改了 美滋滋

至此 问题完美解决