vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一、前言

　　三年.net开发转前端已经四个月了，前端主要用webpack+vue，由于后端转过来的，前端不够系统，希望分享下开发心得与园友一起学习。

　　图片的上传之前都是用的插件(ajaxupload)，或者传统上传图片的方式,各有利弊：插件的问题是依赖jq并且会使系统比较臃肿，还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低，现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离，遵从高内聚，低偶尔的原则，开发人员各司其职，一则提升开发效率（从长期来看，短期对于很多开发人员需要有个适应的过程，特别是初中级的前端处理业务逻辑方面的能力比较欠缺），二则提升用户体验。今天分享下在项目开发中写的的图片上传 vue组件。

二、处理问题

　　这里用h5做图片上传考虑到浏览器支持的问题，这里考虑的场景是在做webapp的时候

　　1.移动web图片上传还包括拍摄上传，但是在移动端会出现拍摄的照片会旋转，处理这个问题需要得到图片旋转的情况，可以用exif.js来获取，具体可以参看文档

　　2.图片压缩

　　3.旋转

三、代码

1组件代码

2.使用方法

以上所述是小编给大家介绍的vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！