vue图片上传及java存储图片(亲测可用)

<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;
}}