在Vue.js这个流行的前端框架中，实现照片上传与展示是一个常见的需求。通过Vue的响应式特性和简洁的语法，我们可以轻松地创建一个用户友好的照片上传和展示系统。本文将详细介绍如何使用Vue.js来实现这一功能，包括照片选择、预览、上传以及展示。
照片选择与预览
1. HTML结构
首先，我们需要一个HTML结构来允许用户选择和预览照片。以下是一个基本的HTML结构示例：
<div id="app">
<input type="file" @change="handleFileUpload" multiple>
<div v-for="(image, index) in images" :key="index">
<img :src="image.src" :alt="'Uploaded image ' + index" />
<button @click="removeImage(index)">Remove</button>
</div>
</div>
2. Vue实例化
new Vue({
el: '#app',
data: {
images: []
},
methods: {
handleFileUpload(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = (e) => {
this.images.push({
src: e.target.result,
name: file.name
});
};
reader.readAsDataURL(file);
}
},
removeImage(index) {
this.images.splice(index, 1);
}
}
});
照片上传
1. 后端接口
在Vue前端实现照片上传之前，我们需要确保后端有一个可以处理文件上传的接口。以下是一个简单的Node.js服务器端示例，使用Express框架和multer中间件来处理文件上传：
const express = require('express');
const multer = require('multer');
const app = express();
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'uploads/');
},
filename: function(req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.').pop());
}
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('photo'), (req, res) => {
res.send('File uploaded successfully.');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2. 前端上传逻辑
在Vue实例中，我们需要一个方法来处理文件上传的逻辑。这通常涉及到使用XMLHttpRequest或者fetch API来发送数据到后端。
methods: {
uploadImages() {
const formData = new FormData();
for (let i = 0; i < this.images.length; i++) {
formData.append('photos', this.images[i]);
}
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
console.log(data);
this.images = []; // 清空图片数组
})
.catch(error => {
console.error('Error uploading images:', error);
});
}
}