vue + axios + java 文件上传

vue + axios + java 文件上传

背景

vue.js + axios + element前端，Java后台实现的文件上传，简单例子

前端代码

document.vue

document.js

import http from '@/utils/request'
import axios from 'axios'

export function create(formData) {
  return axios({
    url: 'http://localhost:8080/solvay-ecustoms//gts/documents/add',
    method: 'post',
    data: formData,
    withCredentials: true // cros with cookie
  })
}
export function list(page, limit, id) {
  return http.post('gts/documents', { page, limit, id })
}

后台代码

controller层

	/**
     * 
Description: 附件上传
     * @param file    上传附件
     * @return
     */
    @ResponseBody
    @PostMapping("/documents/add")
    public String addAttach(@RequestParam("file") MultipartFile file) throws IOException {
        // 获取文件名称
        String fileName = file.getOriginalFilename();
        if (StringUtils.isBlank(fileName)) {
            return jsonfailed("文件不能为空");
        }
        // 获取文件的大小
        long fileSize = file.getSize();
        if (fileSize > 10 * 1024 * 1024) {
            return jsonfailed("上传文件大小超出限定大小10M");
        }
        // 获取文件的扩展名
        // String extension = FilenameUtils.getExtension(fileName);
        // 获取配置路径
        String path = "D:/home/ecustoms/upload/";
        String newPath = path + UUID.randomUUID().toString().replaceAll("-", "") + "\\";
        File newDir = new File(newPath);
        if (!newDir.exists()) {
            newDir.mkdirs(); // 目录不存在的情况下，创建目录
        }
        File newFile = new File(newDir, fileName);
        //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
        file.transferTo(newFile);
        return "ok";
    }

实现截图如下