使用Vue+ElementUI+Axios+SpringBoot实现文件上传

网上的很多上传文件教程基本上都是采用了在action那里加上后端请求的路径，直接提交到后端，但是我由于后端设置了token，不能这样子，必须自己用axios请求。

1.项目后端使用的是SpringBoot

1.1 导入maven依赖

引入maven依赖

commons-fileupload
commons-io

commons-io可以不用自己导入，maven会自动导入对应版本的jar包


        commons-fileupload
        commons-fileupload
        1.3.2

1.2 创建使用Spring配置文件方式编写如下Bean

说明：也可以使用注解方式创建这个Bean，方法类似（现在也更多使用注解方式，简单易用，这个看自己的喜欢~）

1.3 编写测试的Controller

package com.example.demopro.controller.Upload;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;


@RestController
public class UploadController {
    @RequestMapping("/file/upload")
    public Map upload(MultipartFile file) throws IOException {
        Map map = new HashMap<>();
        if (file != null) {  //如果获取到的文件不为空
            String filename = file.getOriginalFilename();
            String pathname = "/Users/wanna/Desktop/blog/UserLoginDemo/Demo/demopro/src/main/resources/file/";
            File file_server = new File(pathname, filename);  //创建文件对象
            if (!file_server.getParentFile().exists()) {
                //如果文件父目录不存在，就创建这样一个目录
                file_server.getParentFile().mkdirs();
                System.out.println("创建目录" + file);
            } else {  //如果父文件夹已经存在

            }
            file.transferTo(file_server);
            map.put("status", true);
            map.put("msg", "上传文件成功");
        } else {   //如果获取到的文件为空
            map.put("status", false);
            map.put("msg", "上传文件失败");
            map.put("reason", "文件为空");
        }
        return map;
    }

}

注意我传递的参数是file，前端传递的参数也必须是file，不然不行！

2. 为了初步测试API，我们使用Postman进行API测试

image.png

在headers中传递我们之前可用的token，在Body处选择，form-data，选择File类型，并设置key为我们后端的参数，即file，在Value处上传我们需要上传的文件！

image.png

后端给我们返回上传成功的信息，并且在我对应的文件夹里找到了对应的文件！

3.使用网上的纯html表单结合Vue编写简单的前端页面

作简单说明：

这里的el-upload上的action标签也必须有，不然也会报错。
我们不使用action方式提交表单，而是使用自定义的HttpRequest方法去提交。在el-upload标签上添加属性:http-request="UploadSubmit"，并在method中定义UploadSubmit方法，注意，需要添加参数param，应该是ElementUI为我们提供的，这个参数会拿到我们的http请求，我们通过param.file就可以拿到我们表单中的文件了！param参数是必须写的！
在UploadSubmit方法中我们自己定义需要的请求（和上面的普通表单的submit类似，小改动）
选用ElementUI上面其他的组件也类似，基本上可以仿照这个例子！

image.png

请求成功，基本功能实现了，具体的细节可以自己折腾了~