vue-simple-uploader怎么实现文件上传

Vue Simple Uploader 是一个简单易用的 Vue.js 文件上传插件，其实现文件上传的步骤如下：

1. 安装 vue-simple-uploader 插件，可以使用 npm 或者 yarn 安装：

npm install vue-simple-uploader
# 或者
yarn add vue-simple-uploader

2. 在 Vue.js 组件中引入并注册 vue-simple-uploader 插件：

import Vue from 'vue'
import VueSimpleUploader from 'vue-simple-uploader'

Vue.use(VueSimpleUploader)

3. 在模板中使用 vue-simple-uploader 组件，并设置相关属性，例如：

<template>
  <div>
    <h2>文件上传</h2>
    <vue-simple-uploader
      ref="uploader"
      :url="uploadUrl"
      :headers="headers"
      :params="params"
      :chunk-size="chunkSize"
      :max-file-size="maxFileSize"
      :concurrent="concurrent"
      :accept="accept"
      @before-upload="beforeUpload"
      @progress="onProgress"
      @success="onSuccess"
      @error="onError"
      @complete="onComplete"
      @abort="onAbort"
    >
      <button>选择文件</button>
    </vue-simple-uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',
      headers: {
        Authorization: 'Bearer xxx',
      },
      params: {
        user_id: 123,
      },
      chunkSize: 1024 * 1024,
      maxFileSize: 1024 * 1024 * 10,
      concurrent: 2,
      accept: 'image/*,application/pdf',
    }
  },
  methods: {
    beforeUpload(file) {
      console.log('beforeUpload:', file)
      // 可以在这里进行文件校验，例如文件类型、大小等
      return true
    },
    onProgress(progress) {
      console.log('onProgress:', progress)
    },
    onSuccess(response) {
      console.log('onSuccess:', response)
    },
    onError(error) {
      console.log('onError:', error)
    },
    onComplete(response) {
      console.log('onComplete:', response)
    },
    onAbort() {
      console.log('onAbort')
    },
  },
}
</script>

4. 在 Vue.js 组件中可以调用 vue-simple-uploader 组件的方法来上传文件，例如：

this.$refs.uploader.upload()

这样就可以实现文件上传了。需要注意的是，上传文件的具体实现需要后端 API 的支持，需要在后端编写相应的文件上传接口。