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

前端代碼:

點擊上傳

只能上傳jpg/png文件，且不超過2MB

提交

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("上傳失敗,請稍后重試");

});

}

}

};

后端代碼

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的進度條沒有了,由于不是很需要就沒有去研究。小白進階,有童鞋發現問題請指正。

總結

以上是生活随笔為你收集整理的java 存储png文件_vue图片上传及java存储图片(亲测可用)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。