之前好几个项目中都有涉及图片传输的场景, 因为项目基本都用Vue + Ele 或者 Mint Muse之类的组件库,首先当然是找库里面是否包含啦。

饿了么组件里的确有uploader上传组件,但是名副其实的是一个上传组件,非表单item。

而自己项目中需要的是一个inputer,选择完图片后跟随其余表单信息一起上传。所以撸了这么一个东西,如果你也正好需要这样的一个inputer,欢迎使用😬

github: vue-img-inputer, 文档什么的都在里面了

demo地址

功能大致就是:

  • 图片值v-model双向绑定

  • 图片预览、拖拽、回填、大小限制

  • 两种主题

  • 一些高度可定制的prop

  • 另外就是自定义主题或者样式还是很方便的

  • 只支持Vue2.x

喜欢不妨给个star吧。 如果在使用中遇到问题或者建议,更欢迎提issues

40 条评论
夏骏维 · 2017年02月22日

局部引入这个插件,说找不到这个模块
Unknown custom element: <vue-img-inpiter> - did you register the component correctly?

回复

0

javascriptexport default { components: { VueImgInputer }}这步注册组件是不是做了呢?

你看上去很美味得样子 作者 · 2017年02月22日
0

诶? 哈哈哈可能是名字打错了,应该是vue-img-inputer

你看上去很美味得样子 作者 · 2017年02月22日
0

因为看到你报错里的是inpiter

你看上去很美味得样子 作者 · 2017年02月22日
小果同学 · 2017年02月22日

无法打开demo

回复

0

你那访问github速度快吗?因为demo是放在gitpage上的?

你看上去很美味得样子 作者 · 2017年02月22日
0
小果同学 · 2017年02月22日
0
你看上去很美味得样子 作者 · 2017年02月22日
伟仔 · 2017年08月14日

您好,我想问下,用这个插件怎么用表单上传?一直都获取不到图片的路劲

回复

0

web 内是无法获取到文件路径的,file input 获取到的是文件的值,在这个组件里你绑定的·v-model 的值就是你选择的文件

你看上去很美味得样子 作者 · 2017年08月14日
鸟德大师 · 2017年09月07日

怎么调整宽高比例啊?手机上竖的图片较多

回复

wj1224 · 1月2日

您好,支持多图片上传吗

回复

0

不支持哦,可以选择用 element 的 upload

你看上去很美味得样子 作者 · 1月3日
载入中...
你看上去很美味得样子 你看上去很美味得样子

400 声望

发布于专栏

陳粥

自己记录

2 人关注