vue element ui，图片+文字表单封装一起请求后端

<template>
  <div style="margin-top: 300px">
    <el-form>
      <el-upload ref="uploadscan" action="http://baidu.com" :multiple="false" :pic-width="250" :pic-height="90"
                 :auto-upload="false" :limit="1" :http-request="requestFile">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
      <el-input v-model="filedata.title" label="请输入文件名"></el-input>
    </el-form>
    <el-button @click="submit" color="primary">提交</el-button>
  </div>
</template>

<script>
  import {post} from "../api/http"
  import axios from 'axios';
  export default {
    name: "test",
    data() {
      return {
        filedata: {},
      }
    },
    methods: {
      submit() {
        this.$refs.uploadscan.submit();
      },
      requestFile(param) {
        // const {...params} = this.filedata;
        // this.$qs.stringify(params)

        let uploadUrl = "/item/filedata/upload";
        let form = new FormData()    // FormData 对象
        form.append('videoFile', param.file)    // 文件对象
        form.append('title', this.filedata.title)  //表单其他参数。。
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        axios.post(uploadUrl, form, config).then(function (result) {
          console.log(result);
        })
      }
    },
  }
</script>

<style scoped>

</style>

参考：
https://blog.csdn.net/qq_41862017/article/details/83030318
https://www.cnblogs.com/wenqiangit/p/10538871.html
https://juejin.cn/post/6844904082361024526