Vue3 上传图片可以使用 axios 库来发送 POST 请求,将图片上传到服务器,然后在前端展示或者保存到数据库中。
以下是一个上传图片的示例代码:
1.在模板里添加一个上传图片的表单:
<template>
<div>
<form @submit.prevent="uploadImage">
<input type="file" ref="file" accept="image/*">
<button type="submit">上传</button>
</form>
<img v-if="imageUrl" :src="imageUrl" alt="图片预览">
</div>
</template>
2.在组件里处理上传图片的逻辑:
<script>
import axios from 'axios';
export default {
data() {
return {
imageUrl: null,
};
},
methods: {
async uploadImage() {
const formData = new FormData();
formData.append('image', this.$refs.file.files[0]);
try {
const response = await axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
this.imageUrl = response.data.imageUrl;
} catch (error) {
console.error(error);
}
},
},
};
</script>
3.在后端服务器代码里处理上传图片的逻辑,以下是一个使用 Node.js 和 Express 的示例:
const multer = require('multer');
const express = require('express');
const app = express();
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, 'uploads/');
},
filename: (req, file, callback) => {
callback(null, Date.now() + '-' + file.originalname);
},
});
const upload = multer({ storage }).single('image');
app.post('/api/upload', (req, res) => {
upload(req, res, error => {
if (error) {
console.error(error);
res.status(400).send('上传图片失败');
} else {
const imageUrl = `/uploads/${req.file.filename}`;
res.send({ imageUrl });
}
});
});
app.listen(3000, () => {
console.log('服务器已启动,监听端口 3000');
});
上传图片的流程大致如上。