Uploader

Appearance

Quick Start ​

安装 ​

bash
npm i @tinyuploader/vue -S

使用 ​

javascript
// main.js
import Vue from 'vue'
import App from './App.vue'
import Uploader from '@tinyuploader/vue'
import '@tinyuploader/vue/dist/style.css'

Vue.use(Uploader)

new Vue({
  render: (h) => h(App)
}).$mount('#app')
vue
<template>
  <div>
    <Uploader
      ref="uploaderRef"
      action="http://localhost:3000/upload"
      :data="{ user: 'moyuderen' }"
      :headers="{ token: 'xxxxxxxx' }"
      accept=".jpg,.json,.png,.dmg"
      :fileList="fileList"
      :chunkSize="1024 * 1024 * 10"
      :checkFileRequest="checkFileRequest"
      :mergeRequest="merge"
      @onExceed="onExceed"
      @onFilesAdded="onFilesAdded"
      @onFileProgress="onProgress"
      @onFileRemove="onRemove"
      @onFail="onFail"
      @onSuccess="onSuccess"
      @onAllFileSuccess="onAllFileSuccess"
      @onChange="onChange"
      @onClick="onClick"
    >
    </Uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: '哈哈',
          path: 'http://baidu.com'
        }
      ]
    }
  },
  methods: {
    onExceed() {
      console.log('超出最大上传次数了')
    },
    onFilesAdded(fileList) {
      console.log('添加文件成功', fileList)
    },
    onRemove(file, fileList) {
      console.log('删除文件成功', file, fileList)
    },
    onProgress(p, file, fileList) {
      // console.log('上传中', p, file, fileList)
    },
    onFail(file, fileList) {
      console.log('上传失败', file, fileList)
    },
    onSuccess(file, fileList) {
      console.log('上传成功', file, fileList)
    },
    onAllFileSuccess(fileList) {
      console.log('全部上传成功', fileList)
    },
    onChange(fileList) {
      console.log('change', fileList)

      this.fileList = fileList
    },
    onClick(file) {
      console.log(file)
    },

    async checkFileRequest(file) {
      const { hash, name } = file
      const { data } = await axios.post('http://localhost:3000/checkFile', {
        hash,
        name,
        status: 'none'
      })
      return data
    },
    async merge(file) {
      const { hash, name } = file
      const { data } = await axios.post('http://localhost:3000/merge', { hash, name })
      file.path = data.data
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .tiny-uploader-btn {
  color: cornflowerblue;
}
</style>

Props 属性 ​

基础属性 ​

参考 @tinyuploader/sdk 的参数配置

drag ​

是否启用拖拽上传 类型 boolean默认值 true

NOTE

当drag开启之后triggerslot 不在生效, 当drag关闭之后dropslot 不在生效

事件属性 ​

参考 @tinyuploader/sdk 的回调

onExceed ​

参考 Exceed

onFilesAdded ​

参考 FilesAdded

onFileRemove ​

参考 FileRemove

onFileProgress ​

参考 FileProgress

onFileFail ​

参考 FileFail

onFileUploadFail ​

参考 FileUploadFail

onFileUploadSuccess ​

参考 FileUploadSuccess

onFileSuccess ​

参考 FileSuccess

onAllFileSuccess ​

参考 AllFileSuccess

onFail ​

文件上传失败的回调,包括 chunk 失败（文件状态为uploadFail），或者 chunk 上传成功但是 merge 失败（文件状态为fail）。即onFileUploadFail和FileFail都会触发onFail

onFail(file, fileList)

onSuccess ​

文件上传成功的回调，包括上传 chunk 完成，mergr 合并完成，与onFileSuccess是一样的

onSuccess(file, fileList)

onChange ​

文件列表发生改变时调用

onChange(fileList, [file])

onClick ​

点击文件时事件

onClick(file)

Methods ​

clear ​

删除所有文件，并且取消所有上传中的请求

vue
<script>
export default {
  methods: {
    clear() {
      this.$refs.uploaderRef.clear() 
    }
  }
}
</script>

submit ​

手动触发上传，一般在autoUpload为false时使用

vue
<script>
export default {
  methods: {
    submit() {
      this.$refs.uploaderRef.submit() 
    }
  }
}
</script>

Slot ​

trigger ​

触发文件选择框

vue
<template>
  <Uploader>
    <button slot="trigger">点击上传</button>
  </Uploader>
</template>

IMPORTANT

需要drag属性为false时该插槽才生效

drop ​

拖拽上传内容区自定义

vue
<template>
  <Uploader>
    <divm slot="drop">
      <uploade-icon />
      从这里拖拽可以上传哦😯
    </divm>
  </Uploader>
</template>

IMPORTANT

需要drag属性为true时该插槽才生效

Demo 展示 ​

mock 接口 ​

阅读文档 ​

更新日志 ​

Last updated: