Vue Simple Uploader使用詳解

一、安裝與配置

Vue Simple Uploader是一個基於Vue.js的單文件上傳組件，使用前需要安裝和配置。

首先，使用npm命令進行安裝。

npm install vue-simple-uploader --save

安裝完成後，在Vue組件中進行配置。配置需引入Uploader組件，並且在methods中聲明方法。

import Uploader from 'vue-simple-uploader'

export default {
  components: {
    Uploader
  },
  methods: {
    uploadFile(file) {
      // 處理上傳操作
    }
  }
}

二、基本使用

在Vue模板中使用Vue Simple Uploader組件，並綁定uploadFile方法。組件還支持多文件上傳、限制文件類型和大小、顯示上傳進度等功能。

<template>
  <Uploader @change="uploadFile"></Uploader>
</template>

在change事件中，可以獲取到上傳的文件信息，通過調用uploadFile方法進行上傳。

uploadFile(file) {
  const formData = new FormData()
  formData.append('file', file)
  axios.post('/api/upload', formData)
    .then(res => {
      console.log(res.data) // 處理上傳結果
    })
}

三、高級使用

Vue Simple Uploader支持多文件上傳，可以通過設置maxFiles屬性限制上傳的最大文件數。同時，組件還支持限制文件類型、限制文件大小、顯示上傳進度等功能。

具體用法如下：

<Uploader :maxFiles="3" :accept="'image/*'" :maxSize="1024"></Uploader>

其中，maxFiles屬性用於限制最大上傳文件數；accept屬性用於限制上傳文件類型；maxSize屬性用於限制上傳文件大小（單位為KB）。

除此之外，組件還提供了一個slot，用於自定義上傳按鈕。

<Uploader :maxFiles="3" :accept="'image/*'" :maxSize="1024">
  <button>點擊上傳</button>
</Uploader>

四、事件監聽

Vue Simple Uploader提供了一些事件來監聽上傳過程中的狀態變化，包括文件添加、文件刪除、上傳開始、上傳進度變化、上傳失敗和上傳成功等事件。

<Uploader :maxFiles="3" @add-file="onAddFile" @delete-file="onDeleteFile"
          @start-upload="onStartUpload" @progress="onProgress"
          @upload-success="onUploadSuccess" @upload-failed="onUploadFailed">
</Uploader>

其中，@add-file和@delete-file事件分別用於監聽添加和刪除文件；@start-upload事件用於監聽上傳開始；@progress事件用於監聽上傳進度變化；@upload-success和@upload-failed事件分別用於監聽上傳成功和失敗。

事件觸發時，可以通過事件參數獲取相關信息。

onAddFile(file) {
  console.log(file) // 文件信息
}

onDeleteFile(file) {
  console.log(file) // 文件信息
}

onStartUpload() {
  console.log('started') // 上傳開始
}

onProgress(progress) {
  console.log(progress) // 上傳進度
}

onUploadSuccess(response) {
  console.log(response) // 上傳成功
}

onUploadFailed(error) {
  console.error(error) // 上傳失敗
}

五、總結

Vue Simple Uploader是一個簡單易用的上傳組件，提供了多文件上傳、限制文件類型和大小、顯示上傳進度等功能，方便快捷，使用靈活。通過本文的介紹，讀者可以快速上手使用Vue Simple Uploader進行文件上傳。源代碼如下：

<template>
  <Uploader :maxFiles="3" :accept="'image/*'" :maxSize="1024"
            @add-file="onAddFile" @delete-file="onDeleteFile"
            @start-upload="onStartUpload" @progress="onProgress"
            @upload-success="onUploadSuccess" @upload-failed="onUploadFailed">
    <button>點擊上傳</button>
  </Uploader>
</template>

<script>
import Uploader from 'vue-simple-uploader'
import axios from 'axios'

export default {
  components: {
    Uploader
  },
  methods: {
    uploadFile(file) {
      const formData = new FormData()
      formData.append('file', file)
      axios.post('/api/upload', formData)
        .then(res => {
          console.log(res.data) // 處理上傳結果
        })
    },

    onAddFile(file) {
      console.log(file)
    },

    onDeleteFile(file) {
      console.log(file)
    },

    onStartUpload() {
      console.log('started')
    },

    onProgress(progress) {
      console.log(progress)
    },

    onUploadSuccess(response) {
      console.log(response)
    },

    onUploadFailed(error) {
      console.error(error)
    }
  }
}
</script>