Vue.js 2.0移动端拍照压缩图片预览及上传实例

在学习和使用Vue.js 2.0的过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和vue。js vue-路由器vuex全家桶结合起来使用，但是在拍照上传的实现过程中遇到了无法调用加的H5接口的问题，所以最后拍照上传功能还是使用输入文件方式里解决的。但是内心还是不甘心的，由于项目进度推进，迭代版本，所以不得不放弃，后续可能我将此功能使用调用H5接口实现。

首先我来讲我实现这个拍照预览压缩上传的思路，准确的说应该是拍照或选择图片压缩之后预览及上传这个流程。每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResizeIMG，这个插件的使用说明可以去看维基，基本原理是通过帆布渲染图片，再通过今天早上方法压缩保存为base64字符串（能够编译为使用联合图象专家组文件交换格式存储的编码图像文件扩展名格式的图片),压缩效果很不错，ios拍照2MB多压缩下来大概是60-80kb左右，失真不是太严重，但是对我的项目来说图片清晰可见就好，我贴的代码里面也会有使用的演示。

模板h5 class='content-header '图片列表/H5 div class=' image-list ' div class=' list-default-img ' v-show=' isPhoto ' @点击。stop=' addPic ' img src=' http :/images/icon_photo.png'/span请选择或者拍照上传照片/span输入类型='file' accept='image/jpeg，image/jpg，image/png ' capture=' camera ' @ change=' onfileChange ' style=' display : none；'/div ul class='list-ul' v-show='！isPhoto ' Li class=' list-Li ' v-for='(iu，index)in imgUrls ' a class=' list-link ' @ click=' previewImage(iu)' img : src=' http : iu '/a span class=' list-img-close ' @ click=' delImage(index)'/span/Li class=' list-Li-add ' span class=' add-img ' @ click。stop=' addPic '/span/Li/ul/div diff(VM。imgurls。长度=1){ VM。isphoto=false} else { vm.isPhoto=true} }，addPic:函数(e) {让vm=this$('input[type=file]).触发器(“点击”)；返回false}，onFileChange:函数{ var files=e . target。文件| | e .数据传输。文件；if(！files.length)返回；this.createImage(文件，e)；}，createImage:函数（文件，e){ 0让vm=thislrz(文件[0]，{ width: 480 }).然后(函数(rst)){ VM。imgurls。按压(rst。base64)；返回rst})。始终（函数(){ //清空文件上传控件的值e .目标值=null});}，delImage:函数(索引){ 0让vm=这个让btnArray=['取消', '确定'];mui.confirm('确定删除该图片？','提示，btnArray，函数(e){ if(e . index==1){ VM。imgurls。拼接(索引，1)；} }) }，预览图像：函数(URL){ 0让VM=this VM . ispreview=true VM . previewmg=URL }，closePreview:函数(){让VM=this VM . ispreview=falsvm . previewmg=}，saveImage:函数(){让vm=这个让urlar=[]，imgUrls=this.imgUrlsfor(设I=0；I IMgurls . lengthi){ if(IMgurls[I]).'(文件')==-1){ urlarr }的索引。推送(IMgurls[I]).split('，')[1])；} else { urlarr。push(IMgurls[I])；} } //数据传输操作} } } /script1 .点击拍照或选择图片addPic

在vue.js中拍照选图是一种频繁的操作行为。一次只能拍摄或选择一张图片，可以上传多张图片。修饰语。stop被添加到click事件中，并且。stop-调用event.stopPropagation()停止冒泡。Accept是指定通过文件上传提交的文件类型，capture是webApp中默认捕获的设备，camera-camera；摄像机-照相机；麦克风录音。

触发拍摄行为时，将change事件绑定在FileChange上得到文件对象，然后调用lrz方法压缩图片，在imgUrls数组中添加基于base64格式的图片。

lrz(文件[0]，{ width: 480 })。然后(function(rst)){ VM . imgurls . push(rst . base64)；返回rst}).always(function() {//清空文件上传控件e.target.value的值=null});lrz(文件，[选项])；File:通过input:file获取的文件，或者直接在图像路径中传递的文件。

[选项]:此参数可以忽略。

宽度{Number}图片的最大宽度默认为原始图片的宽度。如果不设置高度，会适应宽度；高度{数字}如上；质量{Number}图像压缩质量，值为0-1，默认值为0.7；字段名称{String}字段名称由后端接收，默认值：file；返回的结果是一个promise对象，有三种方法：then()、catch()和always。

然后(rst):

Rst.formData后端可以处理数据；Rst.file压缩文件对象(默认已在rst.formData中丢失)，需要注意的是，如果压缩比太低，这将是原始文件对象；rst.fileLen生成的图像的大小，后端可以用来验证传输是否完成；图像base64由rst.base64生成，后端可以将这个字符串作为图像处理，也可以直接用于img.src=base64；rst.base64Len生成的base64的大小，后端可以用来验证传输是否完成(如果采用base64上传模式)；Rst.origin是原始文件对象，存储原始文件的一些信息，比如大小、日期；捕捉(错误)、总是(错误).

注意：由于我们可能会继续点击拍照和上传图片，上传控制值必须在总是回调函数中清除。

//清空文件上传控件e.target.value的值=null2.点击拍摄第一张照片并显示预览，继续拍摄DOM显示的照片

默认的isPhoto为true，隐藏继续拍照的DOM显示，toggleAddPic监控当前选中的imgUrls数组的长度，并转换isPhoto的布尔值。如果一张或多张图片将isPhoto设置为false，则隐藏点击第一张照片的DOM，显示继续拍照的DOM；如果没有图片，隐藏继续拍照的DOM，显示第一张照片的DOM。

3.删除选中的压缩图片

根据数组对应的索引，删除imgUrls中对应的图片数据。

delImage:函数(索引){让vm=this让btnArray=['cancel '，' ok ']；Mui.confirm('您确定要删除此图片吗？'，' prompt '，btnarray，function(e){ if(e . index==1){ VM . imgurls . split(index，1)；} })}

4.预览压缩图片并关闭预览是预览预览图像关闭预览

这里的大图预览是将base64格式的图片直接放入预览DOM的img src进行放大显示，点击图片本身关闭预览，清空img src资源。

5.base64图像传输前保存图像

saveImage:函数(){让vm=this让urlar=[]，imgUrls=this.imgUrlsfor(设I=0；i imgUrls.lengthi ) { if(imgUrls[i]。index of(' file ')==-1){ urlarr . push(IMgurls[I]。split('，')[1])；} else { urlarr . push(IMgurls[I])；} }//数据传输操作}我将base64字符串压缩为“data : image/JPEG；Base64，~~”字符串，用于后端处理，为了区分编辑时后台返回的图像url，我将“data : image/JPEG；“Base64”被截获，并只传递给后端逗号后的base64字符串。

注意：后端接收到我传递的base64字符串数组的时候，发现字符经如果被urlencode后标准的base64中的/、 会被转成%xx，后端在将base64字符串处理成图片时，需要将特殊字符过滤掉。

[httpset]公共操作结果muploaimgbase64字符串(字符串base64字符串){ try { var img data=base64字符串；//过滤特殊字符即可字符串dummyData=imgData .修剪()。替换("%"、"")。替换(',',')。替换(""、"");if (dummyData .长度% 4 ^ 0){虚拟数据=虚拟数据.PadRight(dummyData .长度4 - dummyData .长度% 4,'=');}字节[]字节光线=转换.来自base64字符串(伪数据)；使用（系统。内存流=新系统。内存流（字节流)){变量img=系统绘图。Image.FromStream(毫秒);var path=' ~/Content/UploadFiles/mobile/'；var uploadpath=服务器. MapPath(路径);if(！目录。存在（上传路径)){目录创建目录(upload path)；} var SAVENAmE=上传路径“stoneni丘"。jpg '；img .保存(save name)；返回Json(保存名称)；} } catch(异常e){返回Json(e . Message)；} }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。