Java微信浏览器上传文件使用Base64方法（增加压缩上传方法）
2024-05-15 05:33:59
如果要兼容微信端的浏览器，需要将图片转化成Base64这种格式后，并传给服务器进行处理。如要注意一下几个方面。
1、只允许拍照的图片上传。
<input type="file" capture="camera" accept="image/*" name="logo" id="file">
只需要开启 capture="camera" 就可以完成。
jquery获取 文件类型的输入框信息的方式为
var files = $('#file').prop('files'); //通过files[0]这种方式获取信息例如： files[0].type 这种方式获取对象
//reader.readAsDataURL(files[0]); //读取文件
2、兼容微信浏览器，不能使用input type=file 上传文件。
思路:将图片使用FileReader方法转化成Base64进行处理即可
var reader = new FileReader(); //新建一个FileReader
reader.readAsDataURL(files[0]); //读取文件
reader.onload = function(evt) { //读取完文件之后会回来这里
alert(evt.target.result);
}
生成的Base64带有Data URI scheme的头信息，头文件有如下内容：
目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
如果使用类似JSP这样的动态语言进行处理需要将头信息去掉后，才是文件的Base64编码
同样Base64 也可以直接回显到<img>里面进行显示如下代码：
<img src="https://img-blog.csdnimg.cn/2022010619294233409.png" />
3、压缩图片 以最小图片上传服务器
通过 localResizeIMG-4.9.35 这个插件进行压缩转化
localResizeIMG4这个版本使用的是原生的JS，所以理论上来讲能兼容所有的设备。
请从附件中将其下载
只需要引用 <script src="../dist/lrz.bundle.js"></script>就可以使用了，但要注意的是
1. 一般情况仅需引用 【lrz.bundle.js】 即可。
但绝对不要删除目录下的【*.chunk.js】，这些文件分别对应了IOS和Android的兼容代码，检测到符合环境时会自动引入。
2. 【lrz.all.bundle.js】是包含了所有引用了，莫名其妙的问题下就引用这个吧。
例如：https://github.com/think2011/localResizeIMG/issues/6
3. 【*.map】文件是供调试用的，正式使用删不删除都没关系，因为仅在调试时才会载入。
具体代码如下所示：
!doctype html>
<html lang="zh-cn">
<meta name="viewport" content="width=device-width, user-scalable=no">
<head>
<meta charset="UTF-8">
<title>上传下载组建</title>
</head>
<body>
<!--后台接收的Base64码，这里需要注意的是生成的Base64码前面带有一个头信息，这个头信息需要进行手工处理-->
<input type="text" name="fileBase64" id="fileBase64" value="">
<!--file上传文件-->
<input type="file" capture="camera" accept="image/*" name="logo" id="file">
<!--用于显示图片内容-->
<div id="imgView"></div>
<script src="../dist/lrz.bundle.js?v=09bcc24"></script>
<script type="text/javascript">
document.querySelector('input[type=file]').addEventListener('change', function () {
var that = this;
lrz(that.files[0], {
width: 800
})
.then(function (rst) {
//如果是ajax请求到后台的话，代码也在这里写，具体写法请参考自带的例子，
//这里是通过submit将数据统一提交，所以只保存到隐藏域中即可
var imgView = document.getElementById("imgView");
img = new Image(),
div = document.createElement('div'),
p = document.createElement('p'),
sourceSize = toFixed2(that.files[0].size / 1024),
resultSize = toFixed2(rst.fileLen / 1024),
scale = parseInt(100 - (resultSize / sourceSize * 100));
imgView.innerHTML = "";//先清空原先数值
p.style.fontSize = 13 + 'px';
p.innerHTML = '源文件大小：<span>' +
sourceSize + 'KB' +
'</span> <br />' +
'压缩后大小：<span>' +
resultSize + 'KB (省' + scale + '%)' +
'</span> ';
div.className = '';
div.appendChild(img);
div.appendChild(p);
img.onload = function () {
document.querySelector('#imgView').appendChild(div);
};
img.src = rst.base64;
//保存到隐藏域中。
document.getElementById("fileBase64").value = rst.base64;
return rst;
});
});
function toFixed2 (num) {
return parseFloat(+num.toFixed(2));
}
</script>
</body>
</html>
以上程序可以在HTML页面直接调试。
效果图：
--------------------------------Web前段的代码完毕的分割线-------------------------------------------------
下面的需要在JSP环境下测试了
SpringMVC 后台处理方法
JavaBean
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import com.thinkgem.jeesite.common.config.Global;
/**
* Base64基础JavaBean
* @author taolin
*
*/
public class FileData {
/**
* 通过prop配置文件获取基础路径 本人放到了 c:/code/下面
*/
public static final String basePath = Global.getConfig("2CodeComplaintPath");
String mine;//信息
String suffix;//文件后缀
String data;//Base64原始码
boolean isError;//判断是否参数有误
public boolean isError() {
return isError;
}
/**
* 源字符串 直接解析
* @param original
*/
public FileData(String original) {
super();
String[] temps = original.split(",");
try {
this.mine=temps[0];
this.data=temps[1];
this.suffix = handleSuffix(mine);
this.isError = true;
} catch (Exception e) {
// TODO: handle exception
this.isError = false;
}
}
/**
* 自动解析拆分
* @param mine
* @param data
*/
public FileData(String mine, String data) {
super();
this.mine = mine;
this.data = data;
this.suffix = handleSuffix(mine);
}
public String getMine() {
return mine;
}
public void setMine(String mine) {
this.mine = mine;
this.suffix = handleSuffix(mine);
}
public String getSuffix() {
return suffix;
}
public void setSuffix(String suffix) {
this.suffix = suffix;
}
public String getData() {
return data;
}
public void setData(String data) {
this.data = data;
}
/**
* 用于解析两个匹配字符中间的数据。
* @param mine
* @return
*/
private String handleSuffix(String mine){
String regext = "(?<=(data:image/))(.?)*(?=(;base64))";
Pattern pattern = Pattern.compile(regext);
Matcher matcher = pattern.matcher(mine);
while(matcher.find())
{
return matcher.group();
}
return "";
}
/**
* 路径+文件名
* @return 返回路径+文件全名
*/
public String createPicFullFilePath(){
return createNewDateFilePath()+File.separator+getRandomFileName()+"."+this.suffix;
}
/**
* 路径（文件路径日期方式生成）
* @return 返回路径信息
*/
public String createNewDateFilePath() {
Date date = new Date();
String path=new SimpleDateFormat("yyyy/MM/dd").format(date);
String[] tmps=path.split("/");
StringBuffer mosaic = new StringBuffer(FileData.basePath);
for (String lujing : tmps) {
mosaic.append(lujing+File.separator);
}
mosaic.deleteCharAt(mosaic.length()-1);
return mosaic.toString();
}
/**
* 获取随机文件名称 yyyyMMdd+5尾随机数
* @return
*/
private String getRandomFileName() {
SimpleDateFormat simpleDateFormat;
simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
Date date = new Date();
String str = simpleDateFormat.format(date);
Random random = new Random();
int rannum = (int) (random.nextDouble() * (99999 - 10000 + 1)) + 10000;// 获取5位随机数
return rannum + str;// 当前时间
}
}
Base64转化工具类
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import javax.imageio.ImageIO;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
public class ImageUtil {
private static BASE64Encoder encoder = new sun.misc.BASE64Encoder();
private static BASE64Decoder decoder = new sun.misc.BASE64Decoder();
/**
* 将图片转换为BASE64加密字符串.
* @param imagePath 图片路径.
* @param format 图片格式.
* @return
*/
public static String convertImageToByte(String imagePath, String format) {
File file = new File(imagePath);
BufferedImage bi = null;
ByteArrayOutputStream baos = null;
String result = null;
try {
bi = ImageIO.read(file);
baos = new ByteArrayOutputStream();
ImageIO.write(bi, format == null ? "jpg" : format, baos);
byte[] bytes = baos.toByteArray();
result = encoder.encodeBuffer(bytes).trim();
System.out.println("将图片转换为BASE64加密字符串成功！");
} catch (IOException e) {
System.out.println("将图片转换为 BASE64加密字符串失败: " + e);
} finally {
try {
if(baos != null) {
baos.close();
baos = null;
}
} catch (Exception e) {
System.out.println("关闭文件流发生异常: " + e);
}
}
return result;
}
/**
* 将图片流转换为BASE64加密字符串.
* @param imageInputStream
* @param format 图片格式.
* @return
*/
public static String convertImageStreamToByte(InputStream imageInputStream, String format) {
BufferedImage bi = null;
ByteArrayOutputStream baos = null;
String result = null;
try {
bi = ImageIO.read(imageInputStream);
baos = new ByteArrayOutputStream();
ImageIO.write(bi, format == null ? "jpg" : format, baos);
byte[] bytes = baos.toByteArray();
result = encoder.encodeBuffer(bytes).trim();
System.out.println("将图片流转换为BASE64加密字符串成功！");
} catch (IOException e) {
System.out.println("将图片流转换为 BASE64加密字符串失败: " + e);
} finally {
try {
if(baos != null) {
baos.close();
baos = null;
}
} catch (Exception e) {
System.out.println("关闭文件流发生异常: " + e);
}
}
return result;
}
/**
* 将BASE64加密字符串转换为图片.
* @param base64String
* @param imagePath 图片生成路径.
* @param format 图片格式.
*/
public static void convertByteToImage(String base64String, String imagePath, String format) {
byte[] bytes = null;
ByteArrayInputStream bais = null;
BufferedImage bi = null;
File file = null;
try {
bytes = decoder.decodeBuffer(base64String);
bais = new ByteArrayInputStream(bytes);
bi = ImageIO.read(bais);
file = new File(imagePath);
ImageIO.write(bi, format == null ? "jpg" : format, file);
System.out.println("将BASE64加密字符串转换为图片成功！");
} catch (IOException e) {
System.out.println("将BASE64加密字符串转换为图片失败: " + e);
} finally {
try {
if(bais != null) {
bais.close();
bais = null;
}
} catch (Exception e) {
System.out.println("关闭文件流发生异常: " + e);
}
}
}
}
SpringMVC调用程序
@RequestMapping(value = {"save"})
public String save( HttpServletRequest request, HttpServletResponse response, Model model) {
FileData fileData = new FileData(request.getParameter("fileBase64"));
//转换并保存到本地硬盘
try {
if (fileData.isError()==true) {
//格式化并转换String类型
FileUtils.forceMkdir(new File(fileData.createNewDateFilePath()));
ImageUtil.convertByteToImage(fileData.getData(),fileData.createPicFullFilePath(), fileData.getSuffix());
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "modules/twocode/test1";
}
保存到一个临时文件夹中。
以上代码真实有效，测过了呵呵
资源下载地址：
资源下载地址：
开源架构地址：
http://download.csdn.net/detail/ltllml44/9582641
http://download.csdn.net/detail/ltllml44/9582641
https://download.csdn.net/download/ltllml44/9587063
实例地址
点击打开链接
--------------------------------------------------------------------------------------------结束的分割线-------------------------------------------------------------------------------------------------------------------------
Java微信浏览器上传文件使用Base64方法（增加压缩上传方法）相关推荐
- 微信浏览器 打开zip文件_愚蠢的怪胎技巧：使用7-Zip作为快速的文件浏览器
微信浏览器 打开zip文件 One of the most irritating things in Windows is the file browsing experience- it's slo ...
- 华为手机微信如何与电脑连接到服务器,有华为手机，还用微信QQ传文件到电脑？Huawei share秒传了解一下...
原标题:有华为手机,还用微信QQ传文件到电脑?Huawei share秒传了解一下 华为手机用户,还用微信.QQ传文件到电脑?Huawei share秒传了解一下 我们在办公的时候,难免需要手机和电脑 ...
- ios如何上传文件到服务器,ios通过ftp上传文件到服务器
ios通过ftp上传文件到服务器 内容精选 换一换 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. ...
- vue+elementui 同时有上传文件和批量上传文件功能，上传文件或批量上传文件后必须刷新才能再次上传文件
报错描述: 使用element-ui的上传文件组件写一个批量上传和上传文件,但是发现每次上传文件后或者批量上传文件后,不能再次上传文件或者批量上传文件.只有进入页面第一次点击上传文件或者批量上传文件才 ...
- ftp mac上传文件到服务器,mac ftp 如何上传文件到服务器
mac ftp 如何上传文件到服务器 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器 ...
- 上传文件到服务器的命令,ftp上传文件到服务器命令
ftp上传文件到服务器命令 内容精选 换一换 本文介绍如何在 Linux 系统的本地机器上使用 FTP 服务,将文件从本地上传到云服务器中.已在待上传文件的云服务器中搭建 FTP 服务.如果您的云服务 ...
- 微信浏览器H5下载文件
微信浏览器无法下载文件,我们可以跳转外部浏览器进行下载. 首先绑定按钮事件(我这里用的uniapp开发) <button class="btn" @click="d ...
- java 模拟post上传文件_JAVA模拟HTTP post请求上传文件
在开发中,我们使用的比较多的HTTP请求方式基本上就是GET.POST.其中GET用于从服务器获取数据,POST主要用于向服务器提交一些表单数据,例如文件上传等.而我们在使用HTTP请求时中遇到的比较 ...
- chrome浏览器上传文件延迟_UEditor chrome 点击上传文件选择框会延迟几秒才会显示...
一.概述: 关于UEditor在谷歌浏览Chrome打开选择指上传图片,发现[点击选择图片]时无法立即弹出选择框,而是等4-7秒钟才显示出来的BUG,试了N多方法,改层级都用了,也无效.在网上找到了一 ...
最新文章
- Spring MVC 全局异常处理（1） --SimpleMappingExceptionResolver
- 54 分布式任务队列Celery
- python里面的之前打过的记忆信息-忘了Python关键语句？这份备忘录拯救你的记忆...
- Android设计模式（九）－－外观模式
- Hive常用的SQL命令操作
- 深入分析Kubernetes Critical Pod（二）
- android7.1开机监听广播,Android7.1 Audio Debug相关方法
- Centos5 install vnc
- bilibili 解析_用 Python 抓取 bilibili 弹幕并分析！
- sql中截取字符串函数_SQL Server 2017中的顶级SQL字符串函数
- 【python-dict】dict的使用及实现原理
- Oracle ——数据库 SQL 分页性能分析
- 测验8: 程序设计方法学 (第8周)（编程题）
- MongoDB（芒果数据库）学习（准备）———环境及图形化工具安装
- Android之权限（permission）大全
- “开源和商业化不能形成对立！”
- 电影《绿箭侠第一季》迅雷中英双字下载地址
- 【Easyx库】(1)
- 计算机二级报名时间表天津内容,天津市2018年上半年计算机二级报名通知
- 人一个月瘦多少斤比较合适