java存放图片组件_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
前端代码:
点击上传
提交
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的进度条没有了,由于不是很需要就没有去研究。小白进阶,有童鞋发现问题请指正。
ckeditor 实现图片上传以及预览(亲测有效)
引用ckeditor
标签: 图片上传tomcat重新部署图片消失原因分析以及解决办法 最近在做一个Javaweb的项目,涉及到图片上传,并且需要将图片通过URL回显给JSP页面,在调试的时候发现,上传到tomcat的 ...
Fit项目图片上传和云存储的调通
项目中关于动作的说明需要相应的配图,这样可以更直观的说明动作要点.本篇主要为项目中动作的新增和编辑做准备,确定适合场景的上传操作逻辑以及图片的存储和加载的方法. 一 上传方案 a) 本来所用的模板中是 ...
vue代码上传服务器后背景图片404解决方法
问题:代码上传服务器后,图片404,使用的font-awesome图标也是404 解决办法: 如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin ...
大图片上传(ImageIO,注意有的图片不能上传时因为他是tiff格式)
一下是必要的: 1.enctype="multipart/form-data" 2. //不要使用myeclipse自动生成的get.set方法(struts2中的用法) publ ...
ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
简单的Django实现图片上传，并存储进MySQL数据库 案例——小白
目标:通过网页上传一张图片到Django后台,后台接收并存储进数据库 真是不容易!!这个案例的代码网上太乱,不适合我,自己摸索着写,终于成功了,记录一下,仅供自己参考,有的解释可能不对,自己明白就好, ...
随机推荐
深入理解ecshop2.7.3整合discuzX3.2(97%的完美方案)
转载http://blog.csdn.net/squallleonheart/article/details/39555259 ecshop整合discuzX3.2 ecshop安装包:ECShop_ ...
Android实现电子邮箱客户端
本文主要讲述了安卓平台上利用QQ邮箱SMTP协议,POP3协议发送与接收消息的实现 发送邮件核心代码 import java.security.Security; import java.util.D ...
[LeetCode]题解(python)：017-Letter Combinations of a Phone Number
题目来源: https://leetcode.com/problems/letter-combinations-of-a-phone-number/ 题意分析: 这道题是输入一段数字字符digits, ...
How to install IIS 7.5 on Windows 7 using the Command Line
原文 How to install IIS 7.5 on Windows 7 using the Command Line On Windows Vista, to install IIS 7.0 f ...
VS2012下基于Glut OpenGL glScissor示例程序：
剪裁测试用于限制绘制区域.我们可以指定一个矩形的剪裁窗口,当启用剪裁测试后,只有在这个窗口之内的像素才能被绘制,其它像素则会被丢弃.换句话说,无论怎么绘制,剪裁窗口以外的像素将不会被修改.有的朋友可能 ...
SGU_390_Tickets(另类数位DP)
Tickets Time Limit : 1000/500ms (Java/Other) Memory Limit : 524288/262144K (Java/Other) Total Subm ...
Practical Node.js (2018版) 第10章：Getting Node.js Apps Production Ready
Getting Node.js Apps Production Ready 部署程序需要知道的方面: Environment variables Express.js in production So ...
SQL 必知必会·笔记<;11>;创建高级联结
1. 使用表别名 SQL 除了可以对列名和计算字段使用别名,还允许给表名起别名.这样 做有两个主要理由: 缩短SQL 语句: 允许在一条SELECT 语句中多次使用相同的表. 使用表别名示例: SEL ...
element-ui 的el-button组件中添加自定义颜色和图标
我使用的element-ui的版本是V1.4.13. 如上图所示,如果使用el-button,加颜色是可以通过设置type属性的值,加图标就设置icon属性的值. 现在产品给了一个需求,就是自定义的很 ...