Vue+Vant 实战：图片上传与显示教程

"Vue+Vant 的图片上传与显示教程" 在前端开发中，使用框架可以极大地提高开发效率。Vue.js 是一个流行的轻量级前端框架，而 Vant 是一个基于 Vue 的 UI 组件库，提供了许多开箱即用的组件，如图片上传组件 `van-uploader`。这个案例主要介绍了如何在 Vue 应用中结合 Vant 实现图片的上传和显示。 首先，我们来看一下 Vant 中的 `van-uploader` 组件。`van-uploader` 是一个用于上传图片或文件的组件，它支持多选、预览、上传进度等功能。在描述中给出的例子中，`van-uploader` 的使用方式如下： ```html <van-uploader :after-read="onRead" accept="image/*" multiple> <img class="head-img" src="/static/images/addpic.png" ref="goodsImg"/> </van-uploader> ``` 这里，`:after-read` 是一个绑定到图片读取完成后的回调函数，`accept` 属性指定了可接受的文件类型（在这个例子中只允许上传图片），`multiple` 属性则表示是否允许上传多个文件。内部的 `<img>` 标签用于显示默认图片，`ref="goodsImg"` 用于在 JavaScript 中引用该元素。 在方法部分，`onRead` 函数会在用户选择图片后被调用： ```javascript methods: { onRead(file) { console.log(file); // 将原图片显示为选择的图片 this.$refs.goodsImg.src = file.content; } } ``` `onRead` 函数接收一个文件对象，包含了关于上传文件的信息。在本例中，选择了新图片后，`file.content` 是该图片的 base64 编码，将其赋值给 `this.$refs.goodsImg.src` 可以实现实时预览。 值得注意的是，Vant 的 `van-uploader` 组件处理了图片的 base64 编码，因此可以直接将 base64 数据发送到服务器进行存储。这对于快速实现图片上传功能非常方便。 此外，案例还提到了与 Vant 结合使用 Vue 和 Cordova 实现更复杂的功能，如图片预览和删除。图片预览可以通过 `van-image` 组件的 `@click` 事件和 `v-slot:loading` 进行自定义加载指示器。删除图片可能需要维护一个图片列表，并在点击图标时执行删除操作，例如 `delPic` 方法： ```javascript methods: { delPic(index) { // 从图片列表中移除对应索引的图片 this.file_path.splice(index, 1); } } ``` Vue 结合 Vant 提供了一个简洁、高效的图片上传和显示解决方案，减少了开发者的工作负担，提高了开发效率。通过理解和运用这些组件和方法，开发者可以快速构建出符合需求的前端应用。