npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vux-uploader

v0.1.9

Published

vux-uploader Project, the component to upload images

Downloads

24

Readme

vux-uploader

vux-uploader是什么

vux-uploader是一个vue的上传组件,是对vux组件库的一个补充。
因为vux并没有对weuiuploader组件进行封装,理由见vux issue 682,但这又是一个常见需求。在使用vux过程中,作者实现了这个组件,现整理开源出来,命名为vux-uploader。

vux-uploader的特点

  • 基于vux,适合vux项目
  • 暂时不支持vux $t方式的多语言功能
  • 增加了删除按钮,点击则删除第一张图片
  • 内置图片上传、增加、删除功能,但暂时每次只能操作一张图片
  • 接上,允许用户监听事件,自己实现上传、增加、删除功能
  • 使用axios进行图片上传

快速使用

  1. 检查项目是否符合使用条件
  • 需要是使用vux2的项目
  • 需要安装babelES6部分语法进行转码
  • 需要安装less-loader正确编译less源码
  • 只支持webpack的方式,暂不提供umd
  1. 安装vux-uploader
npm install vux-uploader --save
  1. 使用vux-uploader
// 引入组件
import Uploader from 'vux-uploader'
// 子组件
export default {
  ...
  components: {
    ...
    Uploader,
    ...
  }
  ...
}
  // 使用组件
  <uploader
    :max="varmax"
    :images="images"
    :handle-click="true"
    :show-header="false"
    :readonly="true"
    :upload-url="uploadUrl"
    name="img"
    :params="params"
    size="small"
    @preview="previewMethod"
    @add-image="addImageMethod"
    @remove-image="removeImageMethod"
  ></uploader>

props说明

  • images

    • 类型: Array
    • 默认值: [],空数组
    • 含义: 图片数组,格式为 [ { url: '/url/of/img.ong' }, ...]
    • 备注: 变量为数组时,数据流为双向,在组件内部改变数组的值影响父组件
  • max

    • 类型: Number
    • 默认值: 1
    • 含义: 图片最大张数
    • 备注: 图片达到max值时,新增按钮消失
  • showHeader

    • 类型: Boolean
    • 默认值: true
    • 含义: 是否显示头部
    • 备注: 控制整个头部的显示
  • title

    • 类型: String
    • 默认值: 图片上传
    • 含义: 头部的标题
    • 备注: 不显示则留空
  • showTip

    • 类型: Boolean
    • 默认值: true
    • 含义: 是否显示头部数字部分,即1/3部分
    • 备注: 当showHeaderfalse时,header整体隐藏,此时本参数无效
  • readonly

    • 类型: Boolean
    • 默认值: false
    • 含义: 是否只读
    • 备注: 只读时,新增和删除按钮隐藏
  • handleClick

    • 类型: Boolean
    • 默认值: false
    • 含义: 是否接管新增按钮的点击事件,如果是,点击新增按钮不再自动出现选择图片界面
    • 备注: true时,点击新增按钮,则$emit('add-image'),可以在此事件内进行自定义的选择图片等操作,此后图片的新增、上传、删除都由使用者接管
  • autoUpload

    • 类型: Boolean
    • 默认值: true
    • 含义: 选择图片后是否自动上传。是,则调用内部上传接口。否,则$emit('upload-image', formData)', formData`为图片内容,用户可监听事件自己上传
    • 备注: handleClick为true时,无法进行图片选择,故此参数无效。此参数为false时,选择图片后,$emit('upload-image', formData)', formData`为图片内容
  • uploadUrl

    • 类型: String
    • 默认值: ''
    • 含义: 接收上传图片的url
    • 备注: 需要返回如下格式的json字符串,否则请设置autoUploadfalse自行上传
  { 
    result: 0,
    message: "result不是0时候的错误信息",
    data: {
      url: "http://image.url.com/image.png"
    }
  }
  • name

    • 类型: String
    • 默认值: img
    • 含义: 默认上传的时候,图片使用的表单name
    • 备注: 无
  • params

    • 类型: Object
    • 默认值: null
    • 含义: 上传文件时携带参数
    • 备注: 无
  • size

    • 类型: String
    • 默认值: normal
    • 含义: 尺寸类型
    • 备注: normalweui默认尺寸,small为作者定义的小一些的尺寸
  • capture

    • 类型: String
    • 默认值: ''
    • 含义: input 的capture属性
    • 备注: 可以设置为camera,此时点击新增按钮,部分机型会直接调起相机,注意,各型号手机表现不同,请谨慎使用。handleClick为true时,此属性无效

emit事件说明

  • add-image

    • emit时机: 当handleClick参数为true时,点击新增按钮
    • 参数: 无
    • 备注: 无
  • remove-image

    • emit时机: 当handleClick参数为true时,点击删除按钮
    • 参数: 无
    • 备注: 当handleClickfalse时,点击删除按钮,组件内部删除第一张图片;否则,用户需要监听本事件,并进行相应删除操作
  • preview

    • emit时机: 点击任意一张图片的时候
    • 参数: 图片对象,格式为 { url: 'imgUrl' }
    • 备注: 暂时没有实现自动预览功能,如果需要用户监听事件自行实现
  • upload-image

    • emit时机: handleClick和autoUpload都为false`时,选择图片
    • 参数: formData,图片内容生成的formData
    • 备注: 可以通过vm.$refs.input获取图片的input元素

待实现事项,欢迎PR

  • [ ] 上传进度实时显示
  • [ ] 上传错误时,图片显示错误样式
  • [ ] 一次选择,多图片上传
  • [ ] 其他未实现事项
  • [ ] formData 中 'img' 可以配置
  • [x] 上传图片时,附带post参数+16

感谢与参考

疑问与讨论