Vue+Node 实现图片上传与预览：WeUI 示例详解

本文主要讲解如何使用Vue和Node结合WeUI库来实现一个图片上传和预览功能的示例。首先，我们将通过HTML模板展示页面结构，利用WeUI提供的样式和组件来构建用户界面，包括一个发布动态的功能，用户可以发布带有文字和图片的状态更新。 在HTML部分，我们看到`<template>`标签中包含了`<myheader>`组件，用于显示标题，并有一个返回按钮。在`<div class="upload">`中，如果用户已经登录（userInfo._id存在），会显示一个图片上传区域，包含一个`weui-gallery`组件，用于显示预览图片。该组件包括一个图片容器`<span class="weui-gallery__img" id="galleryImg">`，以及删除图片的按钮。图片上传时，用户可以点击文件输入框选择图片，这些图片会存储在`<ul class="weui-uploader__files" id="uploaderFiles">`中的`<li>`元素内。 图片上传功能是通过`v-for`指令遍历`images`数组，并设置每个图片的背景图。用户可以选择多张图片，但为了简化示例，这里假设只支持单张图片。`v-model="content"`绑定到文本输入框，允许用户输入状态文字。 当用户点击删除按钮时，会触发对应的事件处理函数，用于删除选定的图片。这部分功能需要配合Node.js后端处理，因为前端无法直接删除服务器上的文件。在Node.js中，可以通过接收HTTP请求并操作文件系统来实现图片的上传和删除。 Node.js后端通常会处理文件接收、验证、存储，以及与前端进行数据交互。这可能涉及到使用Express框架，设置路由处理文件上传请求，如`multer`中间件用于解析上传的文件。上传成功后，保存图片到服务器指定目录，并返回一个唯一的标识或URL供前端预览和显示。 预览图片时，前端需要根据后端返回的图片URL动态改变`galleryImg`的背景图。这可以通过修改CSS样式或者在Vue实例中监听图片数据变化来实现。 总结来说，这篇文章提供了一个基础的示例，展示了如何在Vue应用中使用WeUI组件结合Node.js来实现图片上传、预览和管理功能。实际项目中，还需要考虑错误处理、权限验证、文件大小限制等因素，以确保系统的稳定性和安全性。