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'); });
上传图片的流程大致如上。
