Vue.js 2.0移动端拍照压缩预览与H5+上传实战

本文档详细介绍了如何在Vue.js 2.0移动端环境中实现拍照、图片压缩预览以及上传功能。作者原本计划结合MUI框架和Vue.js全家桶（包括vue-router和vuex）开发一个H5应用，但在实际操作中遇到了挑战。在尝试使用H5+的拍照接口时遇到困难，因此最终选择了inputfile方式来实现图片的上传。 核心知识点主要包括： 1. **Vue.js 2.0集成**：作者分享了将Vue.js 2.0与MUI框架结合开发移动端H5应用的经验，强调了Vue全家桶（vue-router和vuex）在项目中的作用。 2. **拍照与选择图片功能**：文章重点讨论了拍照上传功能的实现，涉及到前端如何调用设备摄像头，用户可以选择拍照或从相册中选取图片。 3. **图片压缩技术**：作者推荐了localResizeIMG这个插件，用于图片的压缩处理。该插件利用HTML5的Canvas API和toDataURL方法，可以将大图压缩成适合网络传输的小文件，例如在iOS上，2MB左右的照片压缩后能到60-80KB，尽管可能会有一些失真，但能满足清晰可见的需求。 4. **预览与上传流程**：用户拍照或选择图片后，通过onFileChange事件触发图片压缩，压缩后的图片会预览，并通过inputfile的改变事件上传到服务器。这里展示了具体的HTML模板代码，包括展示图片列表、添加新图片的按钮以及图片列表的渲染。 5. **解决方案与妥协**：由于技术限制，作者不得不暂时放弃H5+接口的使用，采用inputfile方式来满足项目的当前需求。这表明在实际开发中，开发者可能需要根据项目的实际需求和兼容性来选择最合适的解决方案。 总结起来，这篇文章提供了一个完整的Vue.js 2.0移动端应用中拍照、压缩图片预览和上传的实战案例，对于希望在Vue框架下开发H5应用并涉及图片处理功能的开发者具有参考价值。