微信开发h5图片上传

开发环境

vue.js，原生h5 input file, 微信公众号网页

依赖安装

exif-js：IOS下拍照照片的方向有问题，需要exif-js来读取照片信息进行旋转处理；
axios: 异步请求支持
vuex: 主要用来存储进度信息，

npm install exif-js --save

photoHandle.js

这里面主要是这四个方法，具体用途看注释

import EXIF from 'exif-js'
import axi
export default {
/*图片上传方法* dom：获取图片的input节点* config:{*         type: 提交到store的mutation，提交上传接口成功后返回的Url*         maxSize:Number  有此参数时，超过maxSize KB的图片会被压缩*         onload:function(e)  图片解析后的回调*         isProgress:function(e)  图片上传过程的监听回调*         success:function(res)  图片上传成功后接口回调*         fail:function(res)  图片上传失败的回调*         }* */* Orientation:'', //照片初始化角度uploadImg(){}, //解析图片，直接调用此方法会依次执行后面三个方法imageCompress(){}, //压缩图片dataURItoBlob(){}, //压缩后的base64字符串转为blob文件流对象upload(){}//ajax上传
}

每个方法的具体代码和解释：

 uploadImg(dom, config = {}) {//解析图片var $c = document.querySelector(dom),file = $c.files[0],param = new FormData(),reader = new FileReader(),fileSize = (file.size / 1024).toFixed(0),_this = this,configHeader = {headers: {"Content-Type": "multipart/form-data"   }};EXIF.getData(file, function() {_this.Orientation = EXIF.getTag(this, 'Orientation');//reader.readAsDataURL(file);reader.onload = function(e) {if (config.maxSize && fileSize > config.maxSize) { //当存在最大体积限制 进入压缩方法_this.imageCompress(this,(data)=>{setTimeout(()=>{if (config.onload) config.onload(e);param.append("file", data);_this.upload(configHeader, param, config);},0)});} else {if (config.onload) config.onload(e);param.append("file", file);_this.upload(configHeader, param, config);}};});}

压缩方法，前端压缩采用将图片转为base64 然后用canvas绘制再压缩，如不需要压缩可以省略转码和这个步骤，自行根据应用场景和需求进行代码调整吧。

imageCompress(file,callback) { //压缩文件const _this = this;var img = new Image();var data='';img.onload = function() {let w = this.naturalWidth,h = this.naturalHeight,resizeW = 0,resizeH = 0;//压缩设置let maxSize = {  //在这里统一配置，也可以自行修改成传参width:680,      //图片最大宽度height:680,     //图片最大高度level:0.3       //图片保存质量};//计算缩放比例if(w > maxSize.width || h > maxSize.height){let multiple = Math.max(w / maxSize.width , h / maxSize.height);resizeW = w / multiple;resizeH = h / multiple;}else{resizeW = w;resizeH = h;}let canvas = document.createElement("canvas"),cxt = canvas.getContext('2d');//根据拍摄的角度进行图片旋转调整if (_this.Orientation == 3) {canvas.width = resizeW;canvas.height = resizeH;cxt.rotate(Math.PI);cxt.drawImage(img, 0, 0, -resizeW, -resizeH)} else if (_this.Orientation == 8) {canvas.width = resizeH;canvas.height = resizeW;cxt.rotate(Math.PI * 3 / 2);cxt.drawImage(img, 0, 0, -resizeW, resizeH)} else if (_this.Orientation == 6) {canvas.width = resizeH;canvas.height = resizeW;cxt.rotate(Math.PI / 2);cxt.drawImage(img, 0, 0, resizeW, -resizeH)} else {canvas.width = resizeW;canvas.height = resizeH;cxt.drawImage(img, 0, 0, resizeW, resizeH)}//base64,最终输出的压缩文件data = canvas.toDataURL('image/jpeg',maxSize.level);var  str = _this.dataURItoBlob(data);callback(str);};img.src = file.result;// console.log(img.src.length+' 压缩前');},

 dataURItoBlob: function (dataURI) {  //base64转blob// console.log(dataURI.split(',')[1],'sss');var byteString = atob(dataURI.split(',')[1]);var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];var ab = new ArrayBuffer(byteString.length);var ia = new Uint8Array(ab);for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ab], { type: mimeString });},

 upload(configHeader, param, config) {const _this = this;const baseUrl = 'http://yourapiaddress';   //接口上传地址_this.axios({url: baseUrl ,method: "post",header: configHeader,data: param,onUploadProgress: function(progressEvent) {//原生获取上传进度的事件if (progressEvent.lengthComputable) {//属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量//如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loadedif (config.isProgress) config.isProgress(progressEvent);}}}).then(res => {if (res.data.success) {if (config.type)store.commit(config.type, res.data.resultObject.url);if (config.success) config.success(res.data);} else {if (config.fail) config.fail();}}).catch(() => {if (config.fail) config.fail();});}

调用

import photoHandle from  './photoHandle'upLoad() {const _this = this;photoHandle.uploadImg("#imgBtn", {maxSize: 50, //最大体积kbonload: e => {//todo 图片读取成功的处理，比如显示状态上传中},isProgress: res => {let loaded = res.loaded,total = res.total;//todo 进度处理},success: res => {//todo成功},fail: res => {// todo失败}});
},

结言

理解这几个方法的作用便可分应用场景自由组合使用，坑主要在IOS照片旋转和压缩的地方，希望通过此文能解决您的一些问题

微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)相关推荐

解决H5 IOS手机图片上传时图片会旋转90°问题
解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库一.Vant UI库Uploader 组件图 ...
java 图片服务器上传_Java实现把图片上传到图片服务器(nginx+vsftp)
前言: 在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器(请参考nginx + vsftp搭建图片服务器),并且用vsftp的客户端工具filezilla测试过已经可用.但是在 ...
Java实现把图片上传到图片服务器(nginx+vsftp)
在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器,并且用vsftp的客户端工具filezilla测试过已经可用.但是在开发中应该是把用户在前端页面提交的图片保存到图片服务器中, ...
移动端图片上传后进行压缩功能
移动端图片上传后进行压缩功能在进行讲解上传图片压缩之前,我们先来了解下HTML5中的文件上传的基本知识点. 一: FileList对象与file对象. FileList对象表示用户选择的文件列表.在 ...
菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析说明一.图片路径分析二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结四.更新配置文件说明更新时间:202 ...
通过url链接将图片上传oss图片显示不完整问题
通过url链接将图片上传oss图片显示不完整问题问题:在之前通过链接上传图片的时候,都是先获取inputStream流,然后通过available()方法获取文件大小.但是通过这种方法获取到的文件大 ...
java分布式实现图片上传到图片服务器
java分布式实现图片上传到图片服务器操作步骤第一步第二步第三步第四步第五步第六步代码实现第七步 JS代码大功告成!! 操作步骤第一步在页面中的form表单里面增加一个inpu ...
python修改图片大小为30kb_Python的Tornado框架实现图片上传及图片大小修改
图片的上传上传图片使用了表单提交, 下面是html部分, enctype="multipart/form-data"表示不对字节进行编码,上传文件类型时需指定. input标签的 ...
springboot实现图片上传和图片删除
图片上传主要将需要上传的图片上传到对应的存储地址当中,再通过url访问图片就可以了:本文存储地址在本地,如果是在服务器上,配置服务器端的地址就可以了. controller @ApiOperation ...
php 怎么上传图片,php怎么把图片上传到图片服务器
php怎么把图片上传到图片服务器? 图片服务器代码<?php /** * 图片服务器上传API接口 * by Zx * date 2016-04-28 */ header('Content-ty ...

微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)

微信开发h5图片上传

开发环境

依赖安装

photoHandle.js

调用

结言

微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)相关推荐

最新文章

热门文章