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

呐,地址在这里 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年前 加精
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 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年前
96qbhy

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

1年前

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

11个月前
overtrue

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

11个月前

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

7个月前

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

7个月前
overtrue

@lebus 再试试新版

7个月前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!