[JavaScript知识库]vue使用iview的Upload插件进行文件上传 携带参数 携带headers信息等

最近接手了一个重构前端页面的项目, 后台只提供api接口, 需要使用前端的vue框架中的Upload进行上传文件, 并携带两个参数, 同时还需要在请求头中设置userId

接下来看一下如何使用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>