hs-multimode-upload v0.0.4

hs-multimode-upload

注意

Vue@2.4以上，Ant Design of Vue@ 1.5 <= 1.78

特性

• 支持文件、多文件、文件夹上传

• 支持拖拽文件、文件夹上传

• 错误处理

• 上传队列管理，支持最大并发上传

• 分块上传

• 出错自动重试

安装

npm install hs-multimode-upload  --save

使用

初始化

import Vue from 'vue'
import uploader from 'hs-multimode-upload'
import App from './App.vue'

Vue.use(uploader)

/* eslint-disable no-new */
new Vue({
  render(createElement) {
    return createElement(App)
  }
}).$mount('#app')

App.vue

<template>    
    自动上传
    <multimode-upload
            ref="upload"
            signatureUrl="https://省平台获取上传签名账号的地址"
            folder="test"
            tenantId="002"
            token="3a96313c-4fdf-4f95-bfae-e078a86b28a6"
            multiple
            type="oss"
            @finish="finish"
            list-type="picture-card"
            :remove="handleRemove"
            accept="*">
    
        <div v-if="fileList.length < 5">
            <a-icon type="plus" />
            <div class="ant-upload-text">
                Upload
            </div>
        </div>
    </multimode-upload>

    手动上传
    <multimode-upload
            ref="handleUpload"
            signatureUrl="https://省平台获取上传签名账号的地址"
            tenantId="002"
            token="3a96313c-4fdf-4f95-bfae-e078a86b28a6"
            multiple
            folder="test"
            type="minio"
            list-type="text"
            :remove="handleRemove"
            :before-upload="beforeUpload"
            accept="*">

        <div v-if="fileList.length < 5">
            <a-icon type="plus" />
            <div class="ant-upload-text">
                Upload
            </div>
        </div>
    </multimode-upload>

    <a-button
            type="primary"
            :disabled="fileList.length === 0"
            style="margin-top: 16px"
            @click="upload"
    >
        手动上传
    </a-button>

    拖拽上传
    <multimode-upload-dragger
            name="file"
            signatureUrl="https://省平台获取上传签名账号的地址"
            tenantId="002"
            token="3a96313c-4fdf-4f95-bfae-e078a86b28a6"
            folder="test"
            type="minio"
            :multiple="true"
    >
        <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">
            Click or drag file to this area to upload
        </p>
        <p class="ant-upload-hint">
            Support for a single or bulk upload. Strictly prohibit from uploading company data or other
            band files
        </p>
    </multimode-upload-dragger>


</template>

<script>
    export default {
        data () {
            return {
                fileList:[],
            }
        },
        methods: {
            handleRemove(file) {
                const index = this.fileList.indexOf(file);
                const newFileList = this.fileList.slice();
                newFileList.splice(index, 1);
                this.fileList = newFileList;
            },
            finish(data){
                console.log(data)
            },
            upload(){
                let fileList = this.$refs.handleUpload.fileList
                for(let i =0;i < this.fileList.length; i++){
                    setTimeout(()=>{
                        if((typeof(fileList[i].status) === 'undefined') || (fileList[i].status && fileList[i].status === 'error') ){
                            this.$refs.handleUpload.post(this.fileList[i])
                        }
                    }, 0)
                }
            },
            beforeUpload(file){
                this.fileList = [...this.fileList, file];
                return false;
            },
            handleChange(){},
        },
    }
</script>

API

事件

change

上传中、完成、失败都会调用这个函数。

文件状态改变的回调，返回为：

{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}

1. file 当前操作的文件对象。

   {
      uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
      name: 'xx.png',   // 文件名
      status: 'done', // 状态有：uploading done error removed
      response: '{"status": "success"}', // 服务端响应内容
      linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
      xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
   }

2. fileList 当前的文件列表。

3. event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。