java 存储png文件_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
前端代碼:
點擊上傳
只能上傳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存储图片(亲测可用)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Kubeflow使用Kubernetes
- 下一篇: vue数组刷新_Vue中数组更新后,页面