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上传组件，
前台代码如下：

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这个属性里，直接拿来用就好。