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

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

效果图:

使用方法:

  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 于 1年前 加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 19

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

1年前

支持轮子哥

1年前
overtrue

@nff93 哈哈

1年前

超哥很高产啊

1年前

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

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

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

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

file

1年前

正好要用,超哥的就来了。

1年前

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

1年前
Bin

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

1年前

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

1年前
sainmu

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

1年前
overtrue

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

1年前
sainmu

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

1年前
overtrue

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

1年前
qbhy

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

1年前

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

1年前
overtrue

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

1年前

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

10个月前

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

10个月前
overtrue

@lebus 再试试新版

10个月前

  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
评论须知