造了一个 Vue 头像上传组件,求小白鼠体验

呐,地址在这里 https://github.com/overtrue/vue-avatar-cro...

效果图:

使用方法:

  1. 指定一个触发元素,比如 “修改头像” 按钮,或者直接在把原头像作为触发器
  2. 指定上传后的回调逻辑
<button type="button" class="btn btn-primary" id="set-avatar">Update avatar</button>

<avatar-cropper
    trigger="#set-avatar"
    upload-url="/files/upload"
    :uploaded="updateUserAvatar"
></avatar-cropper>

updateUserAvatar 为你的回调逻辑,比如上传完更新用户头像为新头像等。当然你也可以通过其它参数把上传部分直接给你的后台更新逻辑。

记得 star! :heart:

本帖已被设为精华帖!
本帖由 Summer 于 6年前 加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 18
nff93

支持轮子哥,顺便消灭0回复惨案!

6年前 评论

应该是使用canvas来做裁剪的~

在大神的帖子下蹭蹭自己的应用 添加圣诞帽~

把类似给图片添加大头贴的~用的是我的小小框架~

觉得不错的话~~点赞~~

file

6年前 评论

想进超哥的laravel wechat群,需要QQ付款。 QQ从来没绑过银行卡,我就放弃了。

6年前 评论
Bin

@许胜斌 群这个东西,基本作用还是很有限的说。

6年前 评论

@Bin 有道理。呵呵,我在前公司我的英文名也叫 Bin。

6年前 评论
sainmu

@overtrue
能详细说下操作步骤么?我试了好长时间,一直都是点击按钮后,选择图片,然后就没动静了。
npm 也下载过了 cropperjs 过了

6年前 评论

@李兮 选择完图片会将图片上传到你填写的上传地址啊

6年前 评论
sainmu

@overtrue 意思就是说,图片上传完成之后,然后才会剪裁图片?
我以为是选择图片->剪裁->剪裁成功后保存提交。。

6年前 评论

@李兮 选择图片 -> 用户选择裁剪 -> 点击确认 -> 裁剪结果上传到指定的服务端地址 -> 回调指定的函数

6年前 评论
qbhy

哈哈超哥这个插件结合 smms免费图床插件 来上传图片的话就可以上传头像到免费图床了。

6年前 评论

错误个token < in JSON at position 0 这样的错误!

6年前 评论

@菜鸟123 请使用浏览器调试工具查看网络请求与返回值

6年前 评论

小白试用报告:uploaded之后返回太慢了,体验不太好,希望能先转成base64在前端显示之后再去后端

6年前 评论

@overtrue 不过还是很不错的!比别的要简洁明了很多,直接上手就能用

6年前 评论

@lebus 再试试新版

6年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!