首页 >> js开发 >> jsweui上传多图片,压缩,base64编码的示例代码js大全
jsweui上传多图片,压缩,base64编码的示例代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
记录一下在做一个报修功能的心路历程，需求功能很简单，一个表单提交，表单包含简单的文字字段以及图片因为使用的是weui框架，前面的话去找weui的表单和图片上传组件，说实话，weui的组件写的还不错，作为一个不太懂前端的渣渣可以拿来开箱即用主要是不用调那么多的样式问题，直接上代码：
//文件上传js
var tmpl = '',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function(e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
//这里获取到批量的file
var fileNum =fileArr.length;
for(var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if(fileNum + i + 1 > 5) {
break;
}
// fileArr.push(file);
if(url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(e) {
var image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result
image.onload = function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width / 5.5, //压缩后图片的大小
imageHeight = image.height / 5.5;
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
var data = {
base64: canvas.toDataURL('image/jpeg')
}
mui.ajax({
url: "/file/uploadBase64",
type: "POST",
async: false,
cache: false,
processData: false,// 不处理发送的数据
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(data),
success: function(res){
console.log(res)
if (res.code==100){
fileArr.push(res.data);
//上传完成，前端页面显示
$uploaderFiles.append($(tmpl.replace('#url#', canvas.toDataURL('image/jpeg'))));
}else {
weui.toast("出错了，请稍后再试", "forbidden");
}
},
error:function () {
weui.toast("出错了，请稍后再试", "forbidden");
}
});
}
}
}
checkPhotoSize();
});
//控制显示5张以内照片
function checkPhotoSize(){
if(fileArr.length>4){
$(".weui-uploader__input-box").hide();
}else{
$(".weui-uploader__input-box").show();
}
}
var index; //第几张图片
$uploaderFiles.on("click", "li", function() {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function() {
$gallery.fadeOut(100);
});
//删除图片 删除图片的代码也贴出来。
$(".weui-gallery__del").click(function() {
console.log('删除'+index);
$uploaderFiles.find("li").eq(index).remove();
fileArr.splice(index,1);
checkPhotoSize();
});
//文件上传js
var tmpl = '',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function(e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
//这里获取到批量的file
var fileNum =fileArr.length;
for(var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if(fileNum + i + 1 > 5) {
break;
}
// fileArr.push(file);
if(url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(e) {
var image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result
image.onload = function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width / 5.5, //压缩后图片的大小
imageHeight = image.height / 5.5;
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
var data = {
base64: canvas.toDataURL('image/jpeg')
}
mui.ajax({
url: "/file/uploadBase64",
type: "POST",
async: false,
cache: false,
processData: false,// 不处理发送的数据
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(data),
success: function(res){
console.log(res)
if (res.code==100){
fileArr.push(res.data);
//上传完成，前端页面显示
$uploaderFiles.append($(tmpl.replace('#url#', canvas.toDataURL('image/jpeg'))));
}else {
weui.toast("出错了，请稍后再试", "forbidden");
}
},
error:function () {
weui.toast("出错了，请稍后再试", "forbidden");
}
});
}
}
}
checkPhotoSize();
});
//控制显示5张以内照片
function checkPhotoSize(){
if(fileArr.length>4){
$(".weui-uploader__input-box").hide();
}else{
$(".weui-uploader__input-box").show();
}
}
var index; //第几张图片
$uploaderFiles.on("click", "li", function() {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function() {
$gallery.fadeOut(100);
});
//删除图片 删除图片的代码也贴出来。
$(".weui-gallery__del").click(function() {
console.log('删除'+index);
$uploaderFiles.find("li").eq(index).remove();
fileArr.splice(index,1);
checkPhotoSize();
});这里有几个要注意的点这里有几个要注意的点这里有几个要注意的点1、要实现多图片上传，对比了几个UI框架，感觉还是weui的样式做的最好看2、考虑到图片大小问题，一开始我使用的是直接将图片文件以数组的形式post给后台，然后后台使用MultipartFile 数组接收，但是这导致有个问题，现在的手机拍照的图片都比较大，随便都有个3-5M一张图片，如果直接post给后台，用户体验不好（速度太慢了），同时也占用了服务器太多资源（主要是带宽和存储空间），所以必须前端先压缩后再上传3、前端压缩目前能想到的是使用第三方工具接口（阿里或者七牛云端接口）；前端页面利用canvas，进行base64编码，然后发送给后端，显然用后者会比较合适最后利用canvas将图片进行base64编码压缩，可以实现到将3-5M的图片图片压缩为100k内，目前实现的是每次上传图片都会保存在服务器上，删除图片的话没法同步删除服务器上的图片，但是这个问题不大，需要修改的话将这个上传服务器的请求搞到点击提交表单的时候再上传图片就好了最后贴一下后端接收代码：
/**
* 上传图片信息,base64字符串格式
* @param map
* @param model
* @return
*/
@PostMapping(value = "uploadBase64")
@ResponseBody
public Map uploadBase64Image(@RequestBody Map map) throws ParseException, IOException {
Map imageMap = new HashMap<>();
String base64 = map.get("base64").toString();
MultipartFile file = BASE64DecodedMultipartFile.base64ToMultipart(base64);
//获取文件保存路径
String fileSavePath = globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue();
String fileServerPath = globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue();
fileSavePath = fileSavePath + DateUtil.formatDatetime("yyyy-MM-dd");
fileServerPath = fileServerPath + DateUtil.formatDatetime("yyyy-MM-dd");
if (!file.isEmpty()) {
String fileName = file.getOriginalFilename();
String ext=fileName.substring(fileName.lastIndexOf(".")+1);
String imgName = "/"+UUID.randomUUID()+ "." +ext;
InputStream in = null;
OutputStream out = null;
try {
File serverFile = new File(fileSavePath+imgName);
//判断文件父目录是否存在
if(!serverFile.getParentFile().exists()){
serverFile.getParentFile().mkdir();
}
if (!serverFile.exists()) {
serverFile.createNewFile();
}
in = file.getInputStream();
out = new FileOutputStream(serverFile);
byte[] b = new byte[1024];
int len = 0;
while ((len = in.read(b))!=-1) {
out.write(b, 0, len);
}
out.close();
in.close();
String serverPath = fileServerPath + imgName;
return ResultUtil.successJson(serverPath);
} catch (Exception e) {
e.printStackTrace();
return ResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage());
} finally {
if (out != null) {
out.close();
out = null;
}
if (in != null) {
in.close();
in = null;
}
}
} else {
return ResultUtil.errorJson(ErrorEnum.E_90007);
}
}
/**
* base64转MultipartFile文件
*
* @param base64
* @return
*/
public static MultipartFile base64ToMultipart(String base64) {
try {
String[] baseStrs = base64.split(",");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = new byte[0];
b = decoder.decodeBuffer(baseStrs[1]);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new BASE64DecodedMultipartFile(b, baseStrs[0]);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
/**
* 上传图片信息,base64字符串格式
* @param map
* @param model
* @return
*/
@PostMapping(value = "uploadBase64")
@ResponseBody
public Map uploadBase64Image(@RequestBody Map map) throws ParseException, IOException {
Map imageMap = new HashMap<>();
String base64 = map.get("base64").toString();
MultipartFile file = BASE64DecodedMultipartFile.base64ToMultipart(base64);
//获取文件保存路径
String fileSavePath = globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue();
String fileServerPath = globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue();
fileSavePath = fileSavePath + DateUtil.formatDatetime("yyyy-MM-dd");
fileServerPath = fileServerPath + DateUtil.formatDatetime("yyyy-MM-dd");
if (!file.isEmpty()) {
String fileName = file.getOriginalFilename();
String ext=fileName.substring(fileName.lastIndexOf(".")+1);
String imgName = "/"+UUID.randomUUID()+ "." +ext;
InputStream in = null;
OutputStream out = null;
try {
File serverFile = new File(fileSavePath+imgName);
//判断文件父目录是否存在
if(!serverFile.getParentFile().exists()){
serverFile.getParentFile().mkdir();
}
if (!serverFile.exists()) {
serverFile.createNewFile();
}
in = file.getInputStream();
out = new FileOutputStream(serverFile);
byte[] b = new byte[1024];
int len = 0;
while ((len = in.read(b))!=-1) {
out.write(b, 0, len);
}
out.close();
in.close();
String serverPath = fileServerPath + imgName;
return ResultUtil.successJson(serverPath);
} catch (Exception e) {
e.printStackTrace();
return ResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage());
} finally {
if (out != null) {
out.close();
out = null;
}
if (in != null) {
in.close();
in = null;
}
}
} else {
return ResultUtil.errorJson(ErrorEnum.E_90007);
}
}
/**
* base64转MultipartFile文件
*
* @param base64
* @return
*/
public static MultipartFile base64ToMultipart(String base64) {
try {
String[] baseStrs = base64.split(",");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = new byte[0];
b = decoder.decodeBuffer(baseStrs[1]);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new BASE64DecodedMultipartFile(b, baseStrs[0]);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}总结总结总结
图片上传
图片上传
//文件上传js
var tmpl = '',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function(e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
//这里获取到批量的file
var fileNum =fileArr.length;
for(var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if(fileNum + i + 1 > 5) {
break;
}
// fileArr.push(file);
if(url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(e) {
var image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result
image.onload = function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width / 5.5, //压缩后图片的大小
imageHeight = image.height / 5.5;
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
var data = {
base64: canvas.toDataURL('image/jpeg')
}
mui.ajax({
url: "/file/uploadBase64",
type: "POST",
async: false,
cache: false,
processData: false,// 不处理发送的数据
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(data),
success: function(res){
console.log(res)
if (res.code==100){
fileArr.push(res.data);
//上传完成，前端页面显示
$uploaderFiles.append($(tmpl.replace('#url#', canvas.toDataURL('image/jpeg'))));
}else {
weui.toast("出错了，请稍后再试", "forbidden");
}
},
error:function () {
weui.toast("出错了，请稍后再试", "forbidden");
}
});
}
}
}
checkPhotoSize();
});
//控制显示5张以内照片
function checkPhotoSize(){
if(fileArr.length>4){
$(".weui-uploader__input-box").hide();
}else{
$(".weui-uploader__input-box").show();
}
}
var index; //第几张图片
$uploaderFiles.on("click", "li", function() {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function() {
$gallery.fadeOut(100);
});
//删除图片 删除图片的代码也贴出来。
$(".weui-gallery__del").click(function() {
console.log('删除'+index);
$uploaderFiles.find("li").eq(index).remove();
fileArr.splice(index,1);
checkPhotoSize();
});
//文件上传js
var tmpl = '',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function(e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
//这里获取到批量的file
var fileNum =fileArr.length;
for(var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if(fileNum + i + 1 > 5) {
break;
}
// fileArr.push(file);
if(url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(e) {
var image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result
image.onload = function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width / 5.5, //压缩后图片的大小
imageHeight = image.height / 5.5;
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
var data = {
base64: canvas.toDataURL('image/jpeg')
}
mui.ajax({
url: "/file/uploadBase64",
type: "POST",
async: false,
cache: false,
processData: false,// 不处理发送的数据
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(data),
success: function(res){
console.log(res)
if (res.code==100){
fileArr.push(res.data);
//上传完成，前端页面显示
$uploaderFiles.append($(tmpl.replace('#url#', canvas.toDataURL('image/jpeg'))));
}else {
weui.toast("出错了，请稍后再试", "forbidden");
}
},
error:function () {
weui.toast("出错了，请稍后再试", "forbidden");
}
});
}
}
}
checkPhotoSize();
});
//控制显示5张以内照片
function checkPhotoSize(){
if(fileArr.length>4){
$(".weui-uploader__input-box").hide();
}else{
$(".weui-uploader__input-box").show();
}
}
var index; //第几张图片
$uploaderFiles.on("click", "li", function() {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function() {
$gallery.fadeOut(100);
});
//删除图片 删除图片的代码也贴出来。
$(".weui-gallery__del").click(function() {
console.log('删除'+index);
$uploaderFiles.find("li").eq(index).remove();
fileArr.splice(index,1);
checkPhotoSize();
});这里有几个要注意的点这里有几个要注意的点这里有几个要注意的点1、要实现多图片上传，对比了几个UI框架，感觉还是weui的样式做的最好看2、考虑到图片大小问题，一开始我使用的是直接将图片文件以数组的形式post给后台，然后后台使用MultipartFile 数组接收，但是这导致有个问题，现在的手机拍照的图片都比较大，随便都有个3-5M一张图片，如果直接post给后台，用户体验不好（速度太慢了），同时也占用了服务器太多资源（主要是带宽和存储空间），所以必须前端先压缩后再上传3、前端压缩目前能想到的是使用第三方工具接口（阿里或者七牛云端接口）；前端页面利用canvas，进行base64编码，然后发送给后端，显然用后者会比较合适最后利用canvas将图片进行base64编码压缩，可以实现到将3-5M的图片图片压缩为100k内，目前实现的是每次上传图片都会保存在服务器上，删除图片的话没法同步删除服务器上的图片，但是这个问题不大，需要修改的话将这个上传服务器的请求搞到点击提交表单的时候再上传图片就好了最后贴一下后端接收代码：
/**
* 上传图片信息,base64字符串格式
* @param map
* @param model
* @return
*/
@PostMapping(value = "uploadBase64")
@ResponseBody
public Map
Map
String base64 = map.get("base64").toString();
MultipartFile file = BASE64DecodedMultipartFile.base64ToMultipart(base64);
//获取文件保存路径
String fileSavePath = globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue();
String fileServerPath = globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue();
fileSavePath = fileSavePath + DateUtil.formatDatetime("yyyy-MM-dd");
fileServerPath = fileServerPath + DateUtil.formatDatetime("yyyy-MM-dd");
if (!file.isEmpty()) {
String fileName = file.getOriginalFilename();
String ext=fileName.substring(fileName.lastIndexOf(".")+1);
String imgName = "/"+UUID.randomUUID()+ "." +ext;
InputStream in = null;
OutputStream out = null;
try {
File serverFile = new File(fileSavePath+imgName);
//判断文件父目录是否存在
if(!serverFile.getParentFile().exists()){
serverFile.getParentFile().mkdir();
}
if (!serverFile.exists()) {
serverFile.createNewFile();
}
in = file.getInputStream();
out = new FileOutputStream(serverFile);
byte[] b = new byte[1024];
int len = 0;
while ((len = in.read(b))!=-1) {
out.write(b, 0, len);
}
out.close();
in.close();
String serverPath = fileServerPath + imgName;
return ResultUtil.successJson(serverPath);
} catch (Exception e) {
e.printStackTrace();
return ResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage());
} finally {
if (out != null) {
out.close();
out = null;
}
if (in != null) {
in.close();
in = null;
}
}
} else {
return ResultUtil.errorJson(ErrorEnum.E_90007);
}
}
/**
* base64转MultipartFile文件
*
* @param base64
* @return
*/
public static MultipartFile base64ToMultipart(String base64) {
try {
String[] baseStrs = base64.split(",");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = new byte[0];
b = decoder.decodeBuffer(baseStrs[1]);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new BASE64DecodedMultipartFile(b, baseStrs[0]);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
/**
* 上传图片信息,base64字符串格式
* @param map
* @param model
* @return
*/
@PostMapping(value = "uploadBase64")
@ResponseBody
public Map
Map
String base64 = map.get("base64").toString();
MultipartFile file = BASE64DecodedMultipartFile.base64ToMultipart(base64);
//获取文件保存路径
String fileSavePath = globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue();
String fileServerPath = globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue();
fileSavePath = fileSavePath + DateUtil.formatDatetime("yyyy-MM-dd");
fileServerPath = fileServerPath + DateUtil.formatDatetime("yyyy-MM-dd");
if (!file.isEmpty()) {
String fileName = file.getOriginalFilename();
String ext=fileName.substring(fileName.lastIndexOf(".")+1);
String imgName = "/"+UUID.randomUUID()+ "." +ext;
InputStream in = null;
OutputStream out = null;
try {
File serverFile = new File(fileSavePath+imgName);
//判断文件父目录是否存在
if(!serverFile.getParentFile().exists()){
serverFile.getParentFile().mkdir();
}
if (!serverFile.exists()) {
serverFile.createNewFile();
}
in = file.getInputStream();
out = new FileOutputStream(serverFile);
byte[] b = new byte[1024];
int len = 0;
while ((len = in.read(b))!=-1) {
out.write(b, 0, len);
}
out.close();
in.close();
String serverPath = fileServerPath + imgName;
return ResultUtil.successJson(serverPath);
} catch (Exception e) {
e.printStackTrace();
return ResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage());
} finally {
if (out != null) {
out.close();
out = null;
}
if (in != null) {
in.close();
in = null;
}
}
} else {
return ResultUtil.errorJson(ErrorEnum.E_90007);
}
}
/**
* base64转MultipartFile文件
*
* @param base64
* @return
*/
public static MultipartFile base64ToMultipart(String base64) {
try {
String[] baseStrs = base64.split(",");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = new byte[0];
b = decoder.decodeBuffer(baseStrs[1]);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new BASE64DecodedMultipartFile(b, baseStrs[0]);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}总结总结总结
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
