文件上传下载

同步上传

后端代码：

/**
 * 后端处理文件上传要点
 * 1. 处理的servlet必须加上@MultipartConfig注解（或者在xml中配置）
 * 2.在处理方法中利用请求对象的getPart得到Part类型的对象
 * 3.利用Part对象的write方法保存上传过来的文件
 * @author Administrator
 *
 */
@MultipartConfig() //1.
@WebServlet("/upload")
public class FileUploadServlet extends HttpServlet {
​
    
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String savePath = req.getServletContext().getRealPath("uploads");
        Part part = req.getPart("myfile"); //2.
        if(part!=null){
            //3.
            part.write(savePath+File.separator+part.getSubmittedFileName());
        }
    }
}

Spring Mvc处理上传文件

上传到ftp

文件显示

后端响应图片

TODO：

ajax上传

异步上传文件（利用FormData）：formdata介绍

上传脚本

//可以参考：https://www.jianshu.com/p/51188659d778
$("#btnUpload").click(function(){
    //$("#asyncFile")[0] 变成dom对象
    let file =  $("#asyncFile")[0].files[0];//file变量就是获取到的file对象
    let fd = new FormData();
    fd.append("asyncfile", file); //这里的名字决定了后端servlet取文件数据的键名
    fd.append("xxx", "12345");  //可以不用这行代码，演示上传文件时，额外传递其它数据
    $.ajax({
        url:"asyncupload",
        data: fd,
        type: "POST",
        dataType: "json",
        //上传文件无需缓存
        cache: false,
        //用于对data参数进行序列化处理 这里必须false
        processData: false,
        //必须
        contentType: false, 
        success: function (res) {
            alert(res)
        }
    }) 
})

后端代码

@MultipartConfig()
@WebServlet("/asyncupload")
public class AsyncFileUploadServlet extends HttpServlet {
​
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Object data = req.getParameter("xxx");
        System.out.println("debug:---" + data);
        String savePath = req.getServletContext().getRealPath("uploads");
        Part part = req.getPart("asyncfile");
        if(part!=null){
            part.write(savePath+File.separator+part.getSubmittedFileName());
        }
        resp.setContentType("application/json;charset=UTF-8");
        resp.getWriter().print(true);
    }
}

vue+elementui(仅传文件)

vue+插件上传(只上传文件，不带额外数据)

    
      点击上传
      
只能上传jpg/png文件，且不超过500kb
    

脚本

//可以参考：https://www.cnblogs.com/goloving/p/8967865.html
//https://element.eleme.cn/#/zh-CN/component/upload
let vm = new Vue({
    el:"#app"
})

后端代码

@MultipartConfig()
@WebServlet("/vueupload")
public class VueFileUploadServlet extends HttpServlet {
​
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Object data = req.getParameter("xxx");
        System.out.println("debug:---" + data);
        String savePath = req.getServletContext().getRealPath("uploads");
        Part part = req.getPart("file");
        if(part!=null){
            part.write(savePath+File.separator+part.getSubmittedFileName());
        }
        resp.setContentType("application/json;charset=UTF-8");
        resp.getWriter().print(true);
    }
}

文件大小与类型的限制：

TODO:待优化element-ui文件上传 做类型大小的限制 - ```...简单点 - 博客园

beforeUpload(file) {                 
    var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                
    const extension = testmsg === 'xls'
    const extension2 = testmsg === 'xlsx'
    const isLt2M = file.size / 1024 / 1024 < 10
    if(!extension && !extension2) {
        this.$message({
            message: '上传文件只能是 xls、xlsx格式!',
            type: 'warning'
        });
    }
    if(!isLt2M) {
        this.$message({
            message: '上传文件大小不能超过 10MB!',
            type: 'warning'
        });
    }
    return extension || extension2 && isLt2M
}

vue+elementui(文件+额外数据)

vue+插件上传(带额外的数据)

    
        选取文件
        上传到服务器
        
只能上传jpg/png文件，且不超过500kb
    

脚本

//可以参考：https://www.cnblogs.com/goloving/p/8967865.html
//https://element.eleme.cn/#/zh-CN/component/upload
let vm2 = new Vue({
    el:"#app2",
    data:{
        extra:{
            xxx:"12345"
        }
    },
    methods:{
        submitUpload() {
            this.$refs.upload.submit();
        }
    }
})

后端代码

@MultipartConfig()
@WebServlet("/vueupload")
public class VueFileUploadServlet extends HttpServlet {
​
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Object data = req.getParameter("xxx");
        //这里获取除了文件数据外的其他普通数据
        System.out.println("debug:---" + data);
        String savePath = req.getServletContext().getRealPath("uploads");
        Part part = req.getPart("file");
        if(part!=null){
            part.write(savePath+File.separator+part.getSubmittedFileName());
        }
        resp.setContentType("application/json;charset=UTF-8");
        resp.getWriter().print(true);
    }
}