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

前端之家收集整理的这篇文章主要介绍了vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、前言

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

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

二、处理问题

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

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

  2.图片压缩

  3.旋转

三、代码

1组件代码

2.使用方法

  • 上传照片

    以上所述是小编给大家介绍的vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/vue/41046.html

    猜你在找的Vue相关文章