vue实现发送图片

使用 Vue 实现发送图片

前端实现（Vue + HTML）

1. 文件选择与预览
   通过 <input type="file"> 选择图片，利用 FileReader 实现本地预览：

   <template>
     <div>
       <input type="file" accept="image/*" @change="handleFileChange" />
       <img v-if="previewUrl" :src="previewUrl" width="200" />
       <button @click="uploadImage">发送图片</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         selectedFile: null,
         previewUrl: "",
       };
     },
     methods: {
       handleFileChange(event) {
         const file = event.target.files[0];
         if (file) {
           this.selectedFile = file;
           this.previewUrl = URL.createObjectURL(file);
         }
       },
       async uploadImage() {
         if (!this.selectedFile) return;
         const formData = new FormData();
         formData.append("image", this.selectedFile);
         try {
           const response = await axios.post("/api/upload", formData, {
             headers: { "Content-Type": "multipart/form-data" },
           });
           console.log("发送成功:", response.data);
         } catch (error) {
           console.error("发送失败:", error);
         }
       },
     },
   };
   </script>

后端处理（Node.js 示例）

1. 接收并保存图片
   使用 multer 中间件处理文件上传：

   const express = require("express");
   const multer = require("multer");
   const path = require("path");
   
   const app = express();
   const upload = multer({ dest: "uploads/" });
   
   app.post("/api/upload", upload.single("image"), (req, res) => {
     if (!req.file) {
       return res.status(400).send("未上传文件");
     }
     res.json({
       url: `/uploads/${req.file.filename}`,
       originalname: req.file.originalname,
     });
   });
   
   app.listen(3000, () => console.log("服务器已启动"));

优化与扩展

1. 图片压缩与校验
   • 前端校验文件类型和大小：

     handleFileChange(event) {
       const file = event.target.files[0];
       if (!file.type.startsWith("image/")) {
         alert("请选择图片文件");
         return;
       }
       if (file.size > 5 * 1024 * 1024) {
         alert("图片大小不能超过5MB");
         return;
       }
       this.selectedFile = file;
     }

   • 后端使用 sharp 压缩图片：

     const sharp = require("sharp");
     app.post("/api/upload", upload.single("image"), async (req, res) => {
       await sharp(req.file.path)
         .resize(800)
         .toFile(`uploads/compressed_${req.file.filename}`);
     });

实时显示图片

1. 通过 WebSocket 推送
   结合 Socket.IO 实现实时更新：

   // 前端接收
   import io from "socket.io-client";
   const socket = io("http://localhost:3000");
   socket.on("newImage", (data) => {
     console.log("收到新图片:", data.url);
   });

   // 后端推送
   const server = require("http").createServer(app);
   const io = require("socket.io")(server);
   io.on("connection", (socket) => {
     socket.emit("newImage", { url: "/uploads/image.jpg" });
   });