vux-uploader-component

a mobile vue component implementation for weui uploader

Install

npm install -S vux-uploader-component

Mobile demo

https://ejayyoung.github.io/vux-uploader-component/index.html

scan the qrcode and have a test in your device

Usage

Basic

<template>
  <uploader
    v-model="fileList"
    :url="remoteUrl"
    @on-change="onChange"
    @on-cancel="onCancel"
    @on-success="onSuccess"
    @on-error="onError"
    @on-delete="onDelete"
  ></uploader>
</template>
<script>
  import Uploader from "vux-uploader-component";

  export default {
    components: {
      Uploader
    },
    data() {
      return {
        fileList: []
      };
    }
  };
</script>

Custom name

<uploader
  v-model="fileList"
  :url="remoteUrl"
  name="upload"
></uploader>

Extra Params

<uploader
  v-model="fileList"
  :url="remoteUrl"
  :params="{
    token: '13579',
    linkid: '2323',
    modelname: 'modelname'
  }"
></uploader>

Manual Upload

<template>
  <uploader v-model="fileList" :autoUpload="false"></uploader>
</template>
<script>
  import Uploader from "vux-uploader-component";

  export default {
    components: {
      Uploader
    },
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      submit() {
        const formData = new FormData();
        formData.append("file", fileList[0].blob);
        fetch
          .post(url, formData)
          .then(() => {})
          .catch(() => {});
      }
    }
  };
</script>

Props

| property | type | default | description | | -------------- | ----------------- | ---------- | ------------------------------------------------------ | | title | String | '图片上传' | 组件标题 | | files | Array | [] | 初始化数据源，通过on-fileList-change事件绑定 v-model | | limit | Number | String | 5 | 限制上传图片个数 | | limitPrompt | Function | (limit) => `不能上传超过${limit}张图片` | 限制上传alert的提示语 | | capture | Number | String | false | 是否只选择调用相机 | | enableCompress | Boolean | true | 是否压缩 | | maxWidth | String | Number | 1024 | 图片压缩最大宽度 | | quality | String | Number | 0.92 | 图片压缩率 | | url | String | - | 上传服务器 url | | headers | Object | {} | 上传文件时自定义请求头 | | withCredentials| Boolean | - | 设置为true的话，支持标准CORS设置cookie值 | | params | Object | - | 上传文件时自定义参数 | | name | String | 'file' | 上传文件时 FormData 的 Key，默认为 file | | autoUpload | Boolean | true | 是否自动开启上传 | | multiple | String | Boolean | "" | 是否支持多选, false为不支持 | | readonly | Boolean | false | 只读模式（隐藏添加和删除按钮） |

Events

| event | param | description | | ---------- | ---------------------- | ------------------------------------------------------------------------------------------------- | | on-change | (FileItem, FileList) | 选完照片，删除照片时，FileList 变化时触发，返回当前改变的 FileItem，以及当前的 FileList | | on-cancel | () | 选择照片后取消的回调，用于错误提示 | | on-success | (result, fileItem) | 上传请求成功后的回调，返回远程请求的返回结果，及当前添加文件的 FileItem | | on-error | (xhr) | 上传请求失败后的回调，返回xhr | | on-delete | (cb) | 删除照片时的回调,返回隐藏 Previewer，删除图片的回调，没监听onDelete事件的时候，直接执行删除回调 |

v-model

通过 v-model 可以在组件外部获取更新的组件的FileList

返回的 FileItem 格式

目前将 File 对象的属性复制组成 FileItem, FileItem 组成 FileList，便于用户获取 File 对象的信息

{
  "blob": Blob,
  "fetchStatus": "success",
  "lastModified": 1552382376925,
  "lastModifiedDate": "Tue Mar 12 2019 17:19:36 GMT+0800 (中国标准时间)",
  "name": "YourImage.jpeg",
  "progress": 100,
  "size": 68905,
  "type": "image/jpeg",
  "url": "blob:http://0.0.0.0:8080/e3a87d67-a1dc-4909-b5fa-7bb3a7baad11"
}

Todo

• [x] 调用手机相机
• [x] 获取图片并渲染到浏览器
• [x] 解决图片 EXIF 旋转
• [x] 预览图片
• [x] 删除图片
• [x] 支持上传图片配置
• [x] 显示上传进度
• [x] 支持多选
• [x] 支持 v-model 获取 FileList
• [X] 接入Photoswipe，增强预览功能
• [X] xhr支持自定义头部和withCredentials
• [X] 自定义限制alert的提示语内容
• [ ] 改为vue-cli 3.0 打包

Development

# install dependencies
npm install

# serve with hot reload at http://0.0.0.0:8080/
npm run dev

# build for production with minification
npm run build:prod

# publish package
npm version patch
npm publish

For detailed explanation on how things work, consult the docs for vue-loader.

Relevant

• vux
• weui
• webpack-simple template

License

The MIT License