vue 实现图片上传
Vue 图片上传实现方法
在 Vue 中实现图片上传可以通过多种方式完成，以下介绍两种常见方法：使用原生 <input type="file"> 结合 FormData，以及使用第三方库如 vue-upload-component。
原生 HTML5 文件上传
创建一个文件输入元素并处理上传逻辑：
<template>
<div>
<input type="file" @change="handleFileUpload" accept="image/*">
<button @click="uploadImage">上传图片</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedFile: null
}
},
methods: {
handleFileUpload(event) {
this.selectedFile = event.target.files[0]
},
uploadImage() {
if (!this.selectedFile) return
const formData = new FormData()
formData.append('image', this.selectedFile)
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response.data)
}).catch(error => {
console.error('上传失败', error)
})
}
}
}
</script>使用 vue-upload-component 库
安装并配置更强大的上传组件：
npm install vue-upload-component在组件中使用：
<template>
<file-upload
ref="upload"
v-model="files"
post-action="/api/upload"
:multiple="false"
:drop="true"
@input-filter="inputFilter"
>
点击或拖拽上传图片
</file-upload>
</template>
<script>
import FileUpload from 'vue-upload-component'
export default {
components: {
FileUpload
},
data() {
return {
files: []
}
},
methods: {
inputFilter(newFile, oldFile, prevent) {
if (newFile && !/\.(jpe?g|png|gif)$/i.test(newFile.name)) {
return prevent()
}
}
}
}
</script>图片预览功能
在文件选择后显示预览：
<template>
<div>
<input type="file" @change="handleFileUpload" accept="image/*">
<img v-if="imageUrl" :src="imageUrl" width="200">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: null
}
},
methods: {
handleFileUpload(event) {
const file = event.target.files[0]
if (file) {
this.imageUrl = URL.createObjectURL(file)
}
}
}
}
</script>服务器端处理
Node.js Express 示例处理上传：
const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.post('/api/upload', upload.single('image'), (req, res) => {
res.json({
url: `/uploads/${req.file.filename}`
})
})以上方法涵盖了从基础到进阶的图片上传实现，可根据项目需求选择适合的方案。对于生产环境，建议添加文件类型验证、大小限制和进度显示等功能。
