vue实现图片上传插件
实现图片上传插件的方法
使用Vue组件封装上传功能
创建一个独立的Vue组件，包含文件选择、预览和上传逻辑。组件需要处理文件类型验证、大小限制和多文件选择等常见需求。
<template>
<div>
<input type="file" @change="handleFileChange" accept="image/*" multiple>
<div v-for="(file, index) in previewFiles" :key="index">
<img :src="file.preview" width="100">
<button @click="removeFile(index)">删除</button>
</div>
<button @click="uploadFiles">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
files: [],
previewFiles: []
}
},
methods: {
handleFileChange(e) {
const newFiles = Array.from(e.target.files)
newFiles.forEach(file => {
if (!file.type.match('image.*')) return
const reader = new FileReader()
reader.onload = (e) => {
this.previewFiles.push({
file,
preview: e.target.result
})
}
reader.readAsDataURL(file)
})
},
removeFile(index) {
this.previewFiles.splice(index, 1)
},
async uploadFiles() {
const formData = new FormData()
this.previewFiles.forEach(file => {
formData.append('images', file.file)
})
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
})
const result = await response.json()
this.$emit('upload-success', result)
} catch (error) {
this.$emit('upload-error', error)
}
}
}
}
</script>集成第三方库实现更复杂功能
对于需要更强大功能的场景，可以集成现有的Vue上传组件库：
vue-upload-component：提供拖拽上传、分块上传等功能vue-dropzone：基于Dropzone.js的拖拽上传组件v-uploader：支持多文件选择和上传进度显示
npm install vue-upload-component<template>
<file-upload
class="btn btn-primary"
post-action="/upload"
:multiple="true"
:drop="true"
@input-file="inputFile"
v-model="files">
上传图片
</file-upload>
</template>
<script>
import FileUpload from 'vue-upload-component'
export default {
components: {
FileUpload
},
data() {
return {
files: []
}
},
methods: {
inputFile(newFile, oldFile) {
if (newFile && !oldFile) {
// 添加新文件
}
if (newFile && oldFile) {
// 更新文件上传进度
}
if (!newFile && oldFile) {
// 删除文件
}
}
}
}
</script>实现服务器端上传接口
Vue组件需要配合后端API完成完整上传流程。Node.js示例：
const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.post('/api/upload', upload.array('images'), (req, res) => {
const files = req.files
// 处理文件存储逻辑
res.json({
success: true,
files: files.map(file => ({
name: file.originalname,
size: file.size,
path: file.path
}))
})
})添加进度条和验证功能
增强用户体验可以添加上传进度显示和文件验证：
<template>
<div>
<input type="file" @change="handleFileChange" accept="image/*">
<progress :value="progress" max="100"></progress>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
progress: 0,
error: null
}
},
methods: {
handleFileChange(e) {
const file = e.target.files[0]
if (file.size > 2 * 1024 * 1024) {
this.error = '文件大小不能超过2MB'
return
}
const xhr = new XMLHttpRequest()
xhr.upload.addEventListener('progress', (e) => {
this.progress = Math.round((e.loaded / e.total) * 100)
})
xhr.open('POST', '/api/upload', true)
const formData = new FormData()
formData.append('image', file)
xhr.send(formData)
}
}
}
</script>实现图片裁剪和压缩
对于需要处理图片的场景，可以集成cropperjs实现前端裁剪：
npm install cropperjs<template>
<div>
<input type="file" @change="initCropper">
<div class="cropper-container">
<img ref="image" src="">
</div>
<button @click="cropImage">裁剪并上传</button>
</div>
</template>
<script>
import Cropper from 'cropperjs'
export default {
methods: {
initCropper(e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = (event) => {
this.$refs.image.src = event.target.result
this.cropper = new Cropper(this.$refs.image, {
aspectRatio: 1
})
}
reader.readAsDataURL(file)
},
cropImage() {
this.cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData()
formData.append('croppedImage', blob)
// 上传处理后的图片
})
}
}
}
</script>这些方法提供了从简单到复杂的图片上传解决方案，可以根据项目需求选择合适的实现方式。组件化设计使得上传功能可以在不同项目中复用，而集成第三方库可以快速实现高级功能。
