好资源导航 » 文章资讯 » weui上传多图片,压缩,base64编码的示例代码

weui上传多图片,压缩,base64编码的示例代码

2023-07-22 15:44:04 71

记录一下在做一个报修功能的心路历程，需求功能很简单，一个表单提交，表单包含简单的文字字段以及图片

因为使用的是weui框架，前面的话去找weui的表单和图片上传组件，说实话，weui的组件写的还不错，作为一个不太懂前端的渣渣可以拿来开箱即用

主要是不用调那么多的样式问题，直接上代码：





图片上传

//文件上传js
vartmpl='',
$gallery=$("#gallery"),
$galleryImg=$("#galleryImg"),
$uploaderInput=$("#uploaderInput"),
$uploaderFiles=$("#uploaderFiles");
$uploaderInput.on("change",function(e){
varsrc,url=window.URL||window.webkitURL||window.mozURL,
files=e.target.files;
//这里获取到批量的file
varfileNum=fileArr.length;
for(vari=0,len=files.length;i5){
break;
}
//fileArr.push(file);
if(url){
src=url.createObjectURL(file);
}else{
src=e.target.result;
}
varreader=newFileReader()
reader.readAsDataURL(file)
reader.onload=function(e){
varimage=newImage()//新建一个img标签（还没嵌入DOM节点)
image.src=e.target.result
image.onload=function(){
varcanvas=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);

vardata={
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张以内照片
functioncheckPhotoSize(){
if(fileArr.length>4){
$(".weui-uploader__input-box").hide();
}else{
$(".weui-uploader__input-box").show();
}
}
varindex;//第几张图片
$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字符串格式
*@parammap
*@parammodel
*@return
*/
@PostMapping(value="uploadBase64")
@ResponseBody
publicMapuploadBase64Image(@RequestBodyMapmap)throwsParseException,IOException{
MapimageMap=newHashMap<>();
Stringbase64=map.get("base64").toString();
MultipartFilefile=BASE64DecodedMultipartFile.base64ToMultipart(base64);
//获取文件保存路径
StringfileSavePath=globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue();
StringfileServerPath=globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue();
fileSavePath=fileSavePath+DateUtil.formatDatetime("yyyy-MM-dd");
fileServerPath=fileServerPath+DateUtil.formatDatetime("yyyy-MM-dd");
if(!file.isEmpty()){

StringfileName=file.getOriginalFilename();
Stringext=fileName.substring(fileName.lastIndexOf(".")+1);

StringimgName="/"+UUID.randomUUID()+"."+ext;

InputStreamin=null;
OutputStreamout=null;
try{
FileserverFile=newFile(fileSavePath+imgName);
//判断文件父目录是否存在
if(!serverFile.getParentFile().exists()){
serverFile.getParentFile().mkdir();
}
if(!serverFile.exists()){
serverFile.createNewFile();
}
in=file.getInputStream();
out=newFileOutputStream(serverFile);
byte[]b=newbyte[1024];
intlen=0;
while((len=in.read(b))!=-1){
out.write(b,0,len);
}
out.close();
in.close();
StringserverPath=fileServerPath+imgName;
returnResultUtil.successJson(serverPath);
}catch(Exceptione){
e.printStackTrace();
returnResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage());
}finally{
if(out!=null){
out.close();
out=null;
}
if(in!=null){
in.close();
in=null;
}
}
}else{
returnResultUtil.errorJson(ErrorEnum.E_90007);
}
}
/**
*base64转MultipartFile文件
*
*@parambase64
*@return
*/
publicstaticMultipartFilebase64ToMultipart(Stringbase64){
try{
String[]baseStrs=base64.split(",");

BASE64Decoderdecoder=newBASE64Decoder();
byte[]b=newbyte[0];
b=decoder.decodeBuffer(baseStrs[1]);

for(inti=0;i
总结
到此这篇关于weui上传多图片,压缩,base64编码的示例代码的文章就介绍到这了,更多相关Weui多图片压缩上传内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
                
            
              
            
                                    上一篇
微信小程序之搜索分页功能的实现代码
                
                                    下一篇
Python dict的常用方法示例代码
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            剑阁峥嵘而崔嵬的峥嵘是什么意思 剑阁峥嵘而崔嵬是谁写的
                        
                                            
                            月季花是在几月份开 月季花什么时候开花
                        
                                            
                            杨梅坑攻略 在哪里
                        
                                            
                            保护野生动物有多重要 保护野生动物重要意义
                        
                                            
                            纯牛奶做奶油的方法 教你做奶油的方法
                        
                                            
                            木兰花花语 木兰花花语是什么
                        
                                            
                            花蛤怎么炒好吃 花蛤这样炒才好吃简单三步骤
                        
                                            
                            逝者已矣生者如斯意思 逝者已矣生者如斯的意思是什么
                        
                                            
                            魔方最基本的教程 怎么玩魔方
                        
                                            
                            酱肉的制作方法 怎么做酱肉
                        
                                            
                            增加c盘空间怎么做 增加c盘空间做法简述
                        
                                            
                            双氧水有毒吗 双氧水是不是有毒的
                        
                                            
                            车辆购置税怎么做会计分录 快来看看以下信息
                        
                                            
                            2023年冬天是几月到几月
                        
                                            
                            关于吸血鬼的动漫 吸血鬼的动漫推荐
                        
                                            
                            电脑怎么用苹果手机蓝牙连接电脑
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图