京东云上传vue 组件

本组件为vue plugin，实现分片上传，后端可以自定义上传以及合并分片，也可以使用 oss 接口上传到oss 上。

安装

$ npm i jdcloud-oss-upload --save

使用说明

主要封装了三个组件：uploader,uploaderDrop,uploadBtn。

uploader attributes

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | singleFile | 是否为单文件 | Boolean | false | | autoStart | 是否自动开始上传 | Boolean | false | | target | 上传地址 | String | -- | | options | simpleuploader.js 的初始化参数 | Object | | | validateFile | 添加文件时对文件的验证方法，返回Boolean | Function | -- | | defaultUnsupport | 是否显示默认的浏览器支持信息 | Boolean | true |

options 默认配置如下：

  defaultOptions={
                       target: '',
                       chunkSize: 1024 * 1024 * 5,
                       testChunks: true,
                       simultaneousUploads: 3,
                       withCredentials: true,
                       prioritizeFirstAndLastChunk: true,
                       initialPaused: true,
                       maxChunkRetries: 2,
                       chunkRetryInterval: 200,
                       checkChunkUploadedByResponse: function(chunk, result) {
                         try {
                           result = JSON.parse(result)
                           return (
                             result.exist ||
                             result.uploadedChunck.find(item => item === chunk.offset + 1)
                           )
                         } catch (e) {
                           return false
                         }
                       },
                       generateUniqueIdentifier(file) {
                         /* istanbul ignore next */
                         // Some confusion in different versions of Firefox
                         var relativePath =
                           file.relativePath ||
                           file.webkitRelativePath ||
                           file.fileName ||
                           file.name
                         /* istanbul ignore next */
                         return (
                           file.size +
                           '-' +
                           relativePath.replace(/[^0-9a-zA-Z\u4e00-\u9fa5_-]/gim, '')
                         )
                       }
                     }

使用Example

 <uploader
       :target="target"
       :single-file="true"
       :validate-file="checkFile"
       @filesSubmitted="filesSubmitted"
     >
      <template v-slot="{ files }">

      </template>
</uploader>

uploadBtn attributes

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | single | 是否只能选择单文件 | Boolean | false | | directory | 是否可以选择文件夹 | Boolean | false | | attrs | 文件属性，例如文件类型 | Object | {accept: '*/*'} |

使用Example。

<upload-btn :attrs="attr" :single="true">
// 有default slot，可自定义内容。
</upload-btn>

uploaderDrop

使用Example。

<uploader-drop >
  <upload-btn :attrs="attr" :single="true">
  // 有default slot，可自定义内容。
  </upload-btn>
</uploader-drop>

uploaderUnsupport attributes

如果想自定义浏览器支持信息，使用 uploaderUnsupport。

使用Example。

<uploaderUnsupport>
// 有default slot，可自定义内容。
</uploaderUnsupport>

Example

提供了一个demo，分片上传到京东云oss。详见

联系

有问题请提 issue.

License

MIT