Spring Boot 实现图片上传功能(最全,亲测有效!)

今天用Spring boot编写一个文件上传功能,本来自信满满,觉得简单,实际做起来发现报各种错,百度上的好多解决办法都是复制粘贴,没一个靠谱的,经过我的东凑西补最终完美实现上传功能。

一、导入jar包

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>

二、编写上传类

package com.xiateng.util;

import com.xiateng.dao.user.TPictureMapper;
import com.xiateng.entity.TPicture;
import com.xiateng.entity.TUser;
import com.xiateng.interceptor.SessionInterceptor;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.jws.WebService;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.List;

/**
 * 图片上传代码
 * Created by Administrator on 2020/11/15.
 */
@WebServlet(urlPatterns = "/uploadServlet")
public class UploadServlet extends HttpServlet {

    @Autowired
    private TPictureMapper tPictureMapper;
    private static final Logger logger = LoggerFactory.getLogger(SessionInterceptor.class);
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UploadServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    @Override
    public void init(ServletConfig config) throws ServletException {
        // TODO Auto-generated method stub
        super.init();
    }

    /**
     * @see HttpServlet#doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin","http://localhost:3000");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        request.setCharacterEncoding("utf-8"); // 设置编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        // 获得磁盘文件条目工厂
        DiskFileItemFactory factory = new DiskFileItemFactory();

        // 如果没以下两行设置的话,上传大的 文件 会占用 很多内存,
        // 设置暂时存放的 存储室 , 这个存储室,可以和 最终存储文件 的目录不同
        /**
         * 原理 它是先存到 暂时存储室,然后在真正写到 对应目录的硬盘上, 按理来说 当上传一个文件时,其实是上传了两份,第一个是以 .tem
         * 格式的 然后再将其真正写到 对应目录的硬盘上
         */
        factory.setRepository(new File(StaticConst.TEMP_FOLDER1));
        // 设置 缓存的大小,当上传文件的容量超过该缓存时,直接放到 暂时存储室
        factory.setSizeThreshold(1024 * 1024);

        // 高水平的API文件上传处理
        ServletFileUpload upload = new ServletFileUpload(factory);

        try {
            // 提交上来的信息都在这个list里面
            // 这意味着可以上传多个文件
            // 请自行组织代码
            List<FileItem> list = upload.parseRequest(request);
            // 获取上传的文件
            FileItem item = getUploadFileItem(list);
            // 获取文件名
            String filename = getUploadFileName(item);
            // 保存后的文件名
            String saveName = new Date().getTime() + "_"+filename;
            logger.info("保存后的文件名:" + saveName);
            // 保存后图片的浏览器访问路径
            String picUrl = StaticConst.PATH_FOLDER1.replace("\\","/")+"/"+saveName;
            logger.info("存放目录:" + StaticConst.PATH_FOLDER1);
            logger.info("文件名:" + filename);
            logger.info("浏览器访问路径:" + picUrl);

            // 真正写到磁盘上
            item.write(new File(StaticConst.PATH_FOLDER1, saveName)); // 第三方提供的
            PrintWriter writer = response.getWriter();
            logger.info("{");
            logger.info("uploadedFile:"+ "\"" + filename + "\"");
            logger.info(",uploadedFileGetUrl:\"" + picUrl + "\"");
            logger.info("}");

            JSONObject result = new JSONObject();
            result.put("uploadedFile", filename);
            result.put("code",200);
            result.put("uploadedFileGetUrl", picUrl);
            writer.write(result.toString());
            writer.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private FileItem getUploadFileItem(List<FileItem> list) {
        for (FileItem fileItem : list) {
            if (!fileItem.isFormField()) {
                return fileItem;
            }
        }
        return null;
    }

    private String getUploadFileName(FileItem item) {
        // 获取路径名
        String value = item.getName();
        System.out.println(value + ":value");
        // 索引到最后一个反斜杠
        int start = value.lastIndexOf("/");
        // 截取 上传文件的 字符串名字,加1是 去掉反斜杠,
        String filename = value.substring(start + 1);
        return filename;
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request,
                          HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

这一步需要注意:ServletFileUpload 跟 DiskFileItemFactory 类别引错包了,要用commons-fileupload包里的,
我开始一直报错:nested exception is java.lang.NoClassDefFoundError: org/apache/commons/fileupload/disk/DiskFileItemFactory,报错原因是我用的tomcat-embed-core里的类

 静态常量类:

public class StaticConst {

    public static final String PATH_FOLDER = "F:\\uploadImage\\tengJun";

    public static final String TEMP_FOLDER = "F:\\uploadImage\\preFile";

    public static final String PATH_FOLDER1 = "D:\\uploadImage\\tengJun";

    public static final String TEMP_FOLDER1 = "D:\\uploadImage\\preFile";
}

 第三步:启动类添加servlet注解扫描

 第四步:前端代码

<input type="file" class="form-control" id="fileCont" name="file" >


<script>
    $('#fileCont').on('change',function(){
        var fileObj = $(this)[0].files[0];
        var formFile = new FormData();
        //加入文件对象,向接口传入两个参数file,id
        formFile.append("file", fileObj);
          $.ajax({
              url:"/uploadServlet",
              data: formFile,
              type: "POST",
              dataType: "json",
              //上传文件无需缓存
              cache: false,
              //用于对data参数进行序列化处理 这里必须false
              processData: false,
              //必须
              contentType: false,
              success: function (res) {
                  if(res.code === 200){
                      alert("成功");
                  }else{
                      alert("失败");
                  }
              },
          })
    })
</script>

大功告成!!! 

 

猜你喜欢

转载自blog.csdn.net/qq_43037478/article/details/109721213