elementui+vue+axios实现文件上传本地服务器

本文实例为大家分享了elementui+vue+axios实现文件上传本地服务器的具体代码，供大家参考，具体内容如下

文件上传的原理

加入文件上传的依赖

    
      commons-fileupload
      commons-fileupload
      1.4

创建一个web页面

<%--
  Created by IntelliJ IDEA.
  User: 王磊
  Date: 2022/6/9
  Time: 19:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


<%--
    method: 提交的方式  文件的上传必须是post的提交
    enctype:默认为application/x-www-form-urlencoded  表示提交表单数据
            multipart/form-data 可以包含文件数据
            file 文件
            input的类型必须为 file 类型  而且必须有name 属性
--%>

    

    

在springmvc中配置文件上传解析器

创建upload01接口方法

package com.wzl.controller;/*
 * @author     : wzl
 * @date       : 2022/6/9 19:14
 * @description: some description
 */
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
 
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.UUID;
 
@Controller
public class pictureController {
    @RequestMapping("/upload01")
    public String upload01(MultipartFile myfile, HttpServletRequest request) throws Exception{
 
        //(1)得到本地服务目录的地址
        String path = request.getSession().getServletContext().getRealPath("upload");
        //(2)判断该目录是否存在
        File file=new File(path);
        if(!file.exists()){
            file.mkdirs();
        }
        //(3)//把myfile保存到本地服务中某个文件夹下。 缺点:文件的名称
        String filename= UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        File target=new File(path+"/"+filename);
        myfile.transferTo(target); //把myfile转移到目标目录下
        return "";
    }
}

加入web后

<%--
  Created by IntelliJ IDEA.
  User: 王磊
  Date: 2022/6/9
  Time: 20:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    
    
    
    



    <%--action：文件上传的路径--%>
    
        
        
    



 

后台的接口

package com.wzl.controller;/*
 * @author     : wzl
 * @date       : 2022/6/9 20:40
 * @description: some description
 */
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
 
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
 
@Controller

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