一、安装与配置
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>