vue-simple-uploader 的使用(学习笔记)

<template>
  <div>
    <uploader :options="options" @file-added="fileAdded" @upload-file="uploadFile">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <p>Drop files here to upload</p>
      </uploader-drop>
      <uploader-list></uploader-list>
      <uploader-btn>Click to upload</uploader-btn>
    </uploader>
  </div>
</template>
 
<script>
import { uploader, uploaderBtn, uploaderDrop, uploaderList, uploaderUnsupport } from 'vue-simple-uploader'
 
export default {
  components: {
    uploader,
    uploaderBtn,
    uploaderDrop,
    uploaderList,
    uploaderUnsupport
  },
  data () {
    return {
      options: {
        target: 'YOUR_UPLOAD_URL', // 上传的地址
        testChunks: false
      }
    }
  },
  methods: {
    fileAdded(file) {
      // 文件添加时的处理逻辑
      console.log('new file added', file)
    },
    uploadFile(file) {
      // 文件上传时的处理逻辑
      console.log('start upload a file', file)
    }
  }
}
</script>

这个代码实例展示了如何在Vue组件中使用vue-simple-uploader。它定义了一个带有上传区域和按钮的上传器，并提供了文件添加和文件上传时的简单处理逻辑。这个例子可以作为开发者学习如何在Vue应用中集成该上传组件的起点。