vue圖片上傳及java存儲圖片(親測可用)

1.前言

    在使用elementui的upload組件時,我一直無法做到上傳的圖片和其他數據一起提交。單純的上傳文件,java的存儲圖片的方式也有局限性。

    我知道的后端保存圖片有兩種方式:一種是直接存儲到數據庫中(base65和blob都能做到),一種是存儲在服務器上的一個文件夾,數據庫保存圖片地址.　　

    開始我選擇了base64 但是mysql貌似不允許這么長的存儲長度(沒有百度直接否掉了),后面就使用存儲在服務器上。

2.代碼

   流程是,前端選擇好圖片並且填充好想要填寫的數據,點提交就提交到后台進行上傳和其他操作。圖片名稱我在前端進行修改,因為我貌似沒有在 MultipartRequest 類中發現修改    圖片名稱的方法  api地址: http://www.servlets.com/cos/javadoc/com/oreilly/servlet/MultipartRequest.html  

   項目依賴cos.jar  百度雲下載地址: 鏈接：https://pan.baidu.com/s/1NLxxo9JTBp93A1mZ7hIWaA 密碼：gf5y

   前端代碼:

  

<template>
<div>
<el-upload class="upload-demo" action="auto" :http-request="uploadSectionFile" list-type="picture">
  <el-button size="small" type="primary">點擊上傳</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過2MB</div>
</el-upload>
<el-button size="small" type="primary" @click="upload">提交</el-button>
</div>
</template>
<script>
export default {
  data() {
    return {
      uploadFile: ""
    };
  },
  methods: {
    uploadSectionFile(param) {
      let fileObj = param.file;

      const isLt2M = fileObj.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上傳頭像圖片大小不能超過 2MB!");
        return;
      }
      if (fileObj.type === "image/jpeg") {
        this.uploadFile = new File([fileObj], new Date().getTime() + ".jpg", {
          type: "image/jpeg"
        });
      } else if (fileObj.type === "image/png") {
        this.uploadFile = new File([fileObj], new Date().getTime() + ".png", {
          type: "image/png"
        });
      } else {
        this.$message.error("只能上傳jpg/png文件");
        return;
      }
    },
    upload() {
      var param = new FormData(); // FormData 對象
      param.append("file", this.uploadFile); // 文件對象
      param.append("name", "ziguiyu"); // 其他參數
      this.$axios({
        method: "post",
        url: "/GradeSystem/upload.do",
        data: param
      })
        .then(response => {
         this.$message({
          message: '上傳成功',
          type: 'success'
        });
        })
        .catch(error => {
          this.$message.error("上傳失敗,請稍后重試");
        });
    }
  }
};
</script>

　　后端代碼

 

package org.huangxb.course.service;


import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Enumeration;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.huangxb.course.util.makeDirectory;

import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;


public class UploadImg extends HttpServlet {

	    protected void doPost(HttpServletRequest request, HttpServletResponse response)
	            throws ServletException, IOException {

	    	// 設置大小限制（單位：字節）
	    	final int permitedSize = 2097152;

	    	try {               
	    		String type = "";
	    		String name = "";
	    		String originalFilename = "";
	    		String filename = "";
	    		
	    		//上傳目錄
	    		Calendar  cal  =  Calendar.getInstance();
	    		String uploadDate = new SimpleDateFormat( "yyyyMMdd").format(cal.getTime());//以日期為文件夾名稱
	    		String strDirectory = "images/"+uploadDate;
	    		String uploadPath = request.getSession().getServletContext().getRealPath("/") + strDirectory;
	    		makeDirectory.mkDirectory(uploadPath);
	    		// 獲取句柄
	    		MultipartRequest multipartRequest = new MultipartRequest(request, uploadPath, 
	    		                 permitedSize, "ISO-8859-1", new DefaultFileRenamePolicy()); 
	    	        
	    		// 取得文件
	    		Enumeration files = multipartRequest.getFileNames();       
	    	        
	    		// 取得文件詳細信息 
	    		while (files.hasMoreElements()) { 
	    		       name = (String)files.nextElement();
	    		       type = multipartRequest.getContentType(name); 
	    		       filename = multipartRequest.getFilesystemName(name); 
	    		       originalFilename = multipartRequest.getOriginalFileName(name);	       
	    		       File currentFile = multipartRequest.getFile(name);
	    		}
	    		
	    		// 取得其它非文件字段
	    		Enumeration params = multipartRequest.getParameterNames();
	    		
	    		while (params.hasMoreElements()) {
	    		    String param = (String)params.nextElement();
	    		    String value = multipartRequest.getParameter(param);
	    		}                      
	    	} catch (Exception exception) { 
	    		response.sendError(response.SC_METHOD_NOT_ALLOWED);
	    	} finally { 
	    	}
	        
	    }
	   
}

　　

package org.huangxb.course.util;

import java.io.File;

public class makeDirectory {//創建目錄的類
	public static boolean mkDirectory(String path) {
		File file = null;
		try {
			file = new File(path);
			if (!file.exists()) {
				return file.mkdirs();
			}
			else{
				return false;
			}
		} catch (Exception e) {
		} finally {
			file = null;
		}
		return false;
	}

}

　　在測試時,發現upload的進度條沒有了,由於不是很需要就沒有去研究。小白進階,有童鞋發現問題請指正。