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

最新推荐文章于 2024-03-27 14:47:43 发布

唐大仙儿

最新推荐文章于 2024-03-27 14:47:43 发布

阅读量2.9k

点赞数

分类专栏：微信开发文章标签：微信 h5 拍照照片压缩

本文链接：https://blog.csdn.net/tangfan7/article/details/88312067

版权

本文介绍了在微信开发H5中进行图片上传的流程，包括开发环境、依赖安装和关键代码。针对iOS照片旋转问题，使用exif-js库进行处理，并利用canvas进行图片压缩。同时，使用axios进行异步请求，结合vuex存储上传进度。

摘要由CSDN通过智能技术生成

微信开发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 / 102