您的位置:

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>