@tinyuploader/vue/README.md

```bash npm i @tinyuploader/vue -S ```

# 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 style="display: flex; gap: 20px">
    <Uploader
      ref="uploaderRef"
      class="tiny-uploader"
      v-bind="option"
      :defaultFileList="defaultFileList"
      @onExceed="onExceed"
      @onFileAdded="onFileAdded"
      @onFilesAdded="onFilesAdded"
      @onChange="onChange"
      @onFileRemove="onFileRemove"
      @onFileProgress="onFileProgress"
      @onFileUploadSuccess="onFileUploadSuccess"
      @onSuccess="onSuccess"
      @onFail="onFail"
      @onAllFileSuccess="onAllFileSuccess"
      @onClick="onClick"></Uploader>

    <div style="width: 500px; flex: 1">
      <el-form size="small">
        <el-form-item>
          <el-button @click="clear" type="primary">取消所有上传</el-button>
          <el-button v-if="!option.autoUpload" @click="submit" type="primary">手动提交</el-button>
        </el-form-item>
        <el-form-item label="data.userId">
          <el-input v-model="option.data.userId" placeholder="自定义data" clearable />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
const customOption = {
  // input 属性相关
  drag: true,
  accept: '*',
  multiple: true,

  // 文件相关
  limit: 4,
  autoUpload: true,
  customGenerateUid: null,
  beforeAdd: (file) => {
    if (file.name.endsWith('.js')) {
      file.setErrorMessage('不允许上传js文件')
      return false
    }
  },
  beforeRemove: () => true,
  addFailToRemove: false, // 默认为false
  chunkSize: 2 * 1024 * 1024, // 2M
  fakeProgress: true,
  withHash: true,
  useWebWoker: false,

  // 上传逻辑相关
  name: 'file',
  action: 'http://localhost:3000/file/upload',
  customRequest: null,
  withCredentials: true,
  // headers 支持对象或函数两种形式
  // 对象形式：静态 headers
  // headers: {
  //   'X-Requested-With': 'xxxx-xx-xxxx',
  //   'Authorization': 'Bearer token'
  // },
  // 函数形式：动态 headers，根据文件信息返回
  headers: () => ({
    'X-Requested-With': 'xxxx-xx-xxxx',
    'X-Upload-Time': new Date().toISOString()
  }),
  // data 支持对象或函数两种形式
  // 对象形式：静态额外参数
  data: {
    userId: '12345',
    token: 'static-token'
  },
  // 函数形式：动态额外参数，根据文件信息返回
  // data: () => ({
  //   userId: '12345',
  //   uploadTime: Date.now()
  // }),
  requestSucceed: (xhr) => [200, 201, 202, 206].includes(xhr.status),
  maxConcurrency: 6,
  maxRetries: 3,
  retryInterval: 1000,
  checkRequest: async ({ hash, name: filename }, customData) => {
    const { data } = await request({
      url: '/check',
      method: 'get',
      params: {
        hash,
        filename,
        ...customData,
        status: 'none'
      }
    })

    return data
  },
  mergeRequest: async ({ hash, name: filename }, customData) => {
    const { data } = await request({
      url: '/merge',
      method: 'get',
      params: {
        hash,
        filename,
        ...customData,
        status_error: Math.random() > 0.5 ? 'error' : undefined
      }
    })

    return data
  },
  processData: (data) => data,
  customStatus: {}
}

export default {
  data() {
    return {
      defaultFileList: [],
      fileList: [],
      option: customOption
    }
  },
  mounted() {
    setTimeout(() => {
      this.defaultFileList = [
        {
          id: '222',
          name: '哈哈',
          url: 'http://baidu.com'
        }
      ]
    }, 500)
  },
  methods: {
    clear() {
      this.$refs.uploaderRef.clear()
    },
    submit() {
      this.$refs.uploaderRef.submit()
    },
    onChange(file, fileList) {
      this.fileList = fileList
    },
    onExceed(selectedFiles) {
      console.log('onExceed', selectedFiles)
    },
    onFileAdded(file, fileList) {
      console.log('onFileAdded', file, fileList)
    },
    onFilesAdded(fileList) {
      console.log('onFilesAdded', fileList)
    },
    onFileRemove(file, fileList) {
      console.log('onFileRemove', file, fileList)
    },
    onFileProgress(file, fileList) {
      console.log('onFileProgress', file, fileList)
    },
    onFileUploadSuccess() {},
    onSuccess(file, fileList) {
      console.log('onSuccess', file, fileList)
    },
    onFail(file, fileList) {
      console.log('onFail', file, fileList)
    },
    onAllFileSuccess(fileList) {
      console.log('onAllFileSuccess', fileList)
    },
    onClick(file) {
      console.log('onPreview', file.name, file.url)
    }
  }
}
</script>

<style lang="scss">
.tiny-uploader {
  flex: 1;
  --tiny-color-primary: #1dce9f;
}
</style>
```

## [Read Document](https://moyuderen.github.io/uploader/vue/quick-start.html)

## [Server Mock](https://moyuderen.github.io/tiny-uploader-server/zh/)

## [Change Log](https://github.com/moyuderen/tiny-uploader-vue-legacy/blob/main/CHANGELOG.md)

## Demo 展示

- [线上展示](https://codepen.io/moyuderen/full/XWLMMKN)

- [具体代码](https://codepen.io/moyuderen/pen/XWLMMKN)