Vue/Element ui/Formdata 实现文件上传

原文链接：https://blog.csdn.net/qq_34611950/article/details/90382356
文章目录
需求
FormData
使用Element Ui上传组件
需求
需求不算复杂，上传一个文件，上传内容包括文件本身(File)和文件所属分类(String)。

FormData
FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
FormData的主要用途有两个：
1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2、异步上传文件

更为详细的FormData介绍，参见MDN中关于FormData的介绍

使用Element Ui上传组件
1、具体demo可见Element Ui上传组件，
前台代码如下：

<template>
  <div class="man-container">
    <div class="el-card">
      <div class="el-card__header">
        <slot name="header">
          <p>文件上传</p>
        </slot>
      </div>
      <div class="el-card__body">
        <el-row style="margin: 10px 0 0 0">
          <span>上传目录：</span>
          <ul style="margin: 10px 0;display: inline-block;">
            <li>
              <el-select v-model="theme" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </li>
          </ul>
        </el-row>
        <el-row style="margin: 0px">
          <ul style="margin: 0;display: inline-block;">
            <li>
              <el-upload
                class="upload"
                ref="upload"
                action="string"
                :file-list="fileList"
                :auto-upload="false"
                :http-request="uploadFile"
                :on-change="handleChange"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                multiple="multiple"
              >
                <el-button slot="trigger" size="small" type="primary" @click="delFile">选取文件</el-button>
                <el-button
                  style="margin-left: 10px;"
                  size="small"
                  type="success"
                  @click="submitUpload"
                >上传到服务器</el-button>
              </el-upload>
            </li>
          </ul>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
var that = null;
export default {
  name: "AddFile",
  data() {
    return {
      user: {},
      fileList: [],
      multiple: true,
      formData: "",
      options: [
        {
          value: "工作报告",
          label: "工作报告"
        },
        {
          value: "会议记录",
          label: "会议记录"
        }
      ],
      theme: ""
    };
  },
  mounted() {
    that = this;
    let user = window.localStorage.getItem("access-user");
    if (user) {
      user = JSON.parse(user);
      this.user = user;
    }
  },
  methods: {
    delFile() {
      this.fileList = [];
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    uploadFile(file) {
      this.formData.append("file", file.file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    submitUpload() {
      let formData = new FormData();
      formData.append("theme", this.theme);
      formData.append("file", this.fileList[0].raw);

      axios({
        url: this.HOST + "/thematicfile/upload",
        method: "post",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data;charset=utf-8"
        }
      })
        .then(res => {
          if (res.data.success) {
            // alert("导入成功!");
          } else {
            alert(res.data.message + "," + res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
.man-container {
  margin: 0px;
  overflow: hidden;
  bottom: 0px;
  right: 0px;
  width: 100%;
  padding: 50px 20px 0px 20px;
}

.el-card {
  text-align: start;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  border: 1px solid #ddd;
  width: 98%;
}

.el-card__header {
  border-top: 1px solid #373d41;
  border-bottom: 1px solid #ddd;
  padding: 8px 10px !important;
}

.el-card__body {
  padding: 15px !important;
}

.upload {
  min-width: 400px;
  width: 40%;
}
</style>

2、 后台代码controller如下：

 /**
     * 上传文件
     * @param file  上传的文件
     * @param theme  文件所处的专题(对应一个子文件夹)
     * treePath = theme + "-" + fileName
     */
    @RequestMapping(value = "/upload", method = RequestMethod.POST, produces = {"application/json;charset=utf-8"})
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile file, @RequestParam("theme") String theme) {
        return thematicFileService.uploadFile(file, theme);
    }

注意：el-upload组件绑定的属性—— :file-list=“fileList”，渲染后fileList[index]是Object类型，而不是后台所需的File类型，而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里，直接拿来用就好。