java 存储png文件_vue图片上传及java存储图片(亲测可用)
1.前言
在使用elementui的upload組件時(shí),我一直無法做到上傳的圖片和其他數(shù)據(jù)一起提交。單純的上傳文件,java的存儲(chǔ)圖片的方式也有局限性。
我知道的后端保存圖片有兩種方式:一種是直接存儲(chǔ)到數(shù)據(jù)庫中(base65和blob都能做到),一種是存儲(chǔ)在服務(wù)器上的一個(gè)文件夾,數(shù)據(jù)庫保存圖片地址.
開始我選擇了base64 但是mysql貌似不允許這么長的存儲(chǔ)長度(沒有百度直接否掉了),后面就使用存儲(chǔ)在服務(wù)器上。
2.代碼
流程是,前端選擇好圖片并且填充好想要填寫的數(shù)據(jù),點(diǎn)提交就提交到后臺(tái)進(jìn)行上傳和其他操作。圖片名稱我在前端進(jìn)行修改,因?yàn)槲颐菜茮]有在?MultipartRequest 類中發(fā)現(xiàn)修改 ? ?圖片名稱的方法 ?api地址:?http://www.servlets.com/cos/javadoc/com/oreilly/servlet/MultipartRequest.html
項(xiàng)目依賴cos.jar ?百度云下載地址:?鏈接：https://pan.baidu.com/s/1NLxxo9JTBp93A1mZ7hIWaA 密碼：gf5y
前端代碼:
點(diǎn)擊上傳
只能上傳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 對(duì)象
param.append("file", this.uploadFile); // 文件對(duì)象
param.append("name", "ziguiyu"); // 其他參數(shù)
this.$axios({
method: "post",
url: "/GradeSystem/upload.do",
data: param
})
.then(response => {
this.$message({
message: '上傳成功',
type: 'success'
});
})
.catch(error => {
this.$message.error("上傳失敗,請(qǐng)稍后重試");
});
}
}
};
后端代碼
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 {
// 設(shè)置大小限制(單位：字節(jié))
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();
// 取得文件詳細(xì)信息
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 {//創(chuàng)建目錄的類
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;
}
}
在測試時(shí),發(fā)現(xiàn)upload的進(jìn)度條沒有了,由于不是很需要就沒有去研究。小白進(jìn)階,有童鞋發(fā)現(xiàn)問題請(qǐng)指正。
總結(jié)
以上是生活随笔為你收集整理的java 存储png文件_vue图片上传及java存储图片(亲测可用)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Kubeflow使用Kubernetes
- 下一篇： SpringBoot实现国际化