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";  }

实现截图如下

vue+axios+java实现文件上传功能_第1张图片

vue+axios+java实现文件上传功能_第2张图片

vue+axios+java实现文件上传功能_第3张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue+axios+java实现文件上传功能)