阿牛博客

移动端上传用户头像-图片裁剪及七牛云上传

前段时间做了一个移动端用户头上传功能,该功能主利用了一个裁剪组件实现了一个简单的七牛上传,这里做个简单的分享。
效果图:
(tip:图片点击可放大,方便移动端浏览)
手机端图片是可以放大缩小的,这里用pc端录的,效果展示不出来。。
测试domo:
请戳这~
主要实现步骤
1.利用input:type=”file”获取图片;
2.将图片传入裁剪组件,利用裁剪组件,用户将图片适当的裁剪、调整;
3.获取七牛的验证配置(token),利用FormData将验证配置及裁剪好的图片文件通过七牛接口提交到七牛云服务器,然后将返回的七牛云那边返回的key(地址)传给后端,后端拼接key组成图片地址链接存入用户头像的数据表,更新用户头像;

上传组件

html:

这里用到了一个剪切图片的一个小组件vue-imageClipper,git地址:请戳这~
剪切图片的时候没有用到普通的display(v-show)而是用到了visibility,是因为vue-imageClipper这个组件一开始进入页面就需要初始化,不然会渲染出错。
sass:

js:

上面的js有具体的解释,直接看代码即可,这里我就不在说明了。

页面调用

html:

js:

sass:

具体就是这些了,大家需要的可以参考一下。

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/549

上一篇: webstorm快捷键、支持vue文件等部分使用技巧 » 下一篇: DataURL, Blob, File, Image之间的关系与转换 »