vue+element_ui手动上传文件,并传递额外参数

Vue Element UI提供了一种手动上传文件的方式，可以传递额外的参数。

首先，需要在html文件中引入Element UI的组件库和Vue库。

然后，在Vue组件中定义一个函数用于处理文件上传。该函数需要通过FormData构造器创建一个FormData对象，并以文件为内容向其中添加数据，同时添加额外的参数。

接下来，需要添加一个input元素，用于选择需要上传的文件。可以通过ref属性将该元素的引用保存到Vue组件中。当用户选择文件并点击上传按钮时，会调用上述处理文件上传的函数来上传文件。

最后，在html文件中添加一个按钮，用于触发文件上传的方法。

代码示例：

<template>
  <div>
    <input type="file" ref="inputFile" name="file" @change="uploadFile">
    <el-button type="primary" @click="submit">上传文件</el-button>
  </div>
</template>
<script>
  export default {
    name: "FileUpload",
    methods: {
      uploadFile() {
        const inputFile = this.$refs.inputFile
        const file = inputFile.files[0];
        const formData = new FormData();
        formData.append('file', file);
        formData.append('name', 'example');
        // 发送POST请求上传文件及参数
        axios.post('/upload', formData).then(response => {
          console.log(response);
        })
      },
      submit() {
        this.uploadFile();
      }
    }
  }
</script>