van-uploader上传图片前端添加水印

### 关于 `van-uploader` 实现多图片上传 在前端开发中，`vant` 提供了一个功能强大的文件上传组件——`van-uploader`。通过配置该组件的相关属性，可以轻松实现多图片上传的功能。 以下是基于 `vant` 的 `van-uploader` 组件实现多图片上传的具体方法： #### 属性说明 - **v-model**: 可以绑定到一个数组变量上，用来存储选中的文件列表。 - **multiple**: 设置为 `true` 时允许一次选择多个文件[^1]。 - **max-count**: 定义最多可以选择的文件数量。 - **after-read**: 图片加载完成后触发的回调函数，在此函数中可处理图片预览逻辑或者发起网络请求上传图片。 下面是一个完整的 Vue.js 示例代码展示如何利用这些特性来完成多张图片的选择与上传操作: ```vue <template> <div> <!-- van-uploader --> <van-uploader v-model="fileList" :multiple="true" :max-count="9" @after-read="handleAfterRead"> <van-button icon="photograph">上传照片</van-button> </van-uploader> <!-- 已经上传成功的图片显示区域 --> <div class="preview-area"> <img v-for="(item, index) in previewImages" :key="index" :src="item.url" alt="" /> </div> </div> </template> <script> export default { data() { return { fileList: [], // 存储当前已选择但尚未上传至服务器端的文件对象集合 previewImages: [] // 显示已经成功上传后的远程地址链接组成的数组 }; }, methods: { handleAfterRead(file) { if (Array.isArray(file)) { // 如果是一次选择了多张图，则 file 是个数组 this.fileList.push(...file); // 假设这里模拟异步上传过程并获取返回的结果url const uploadedUrls = file.map(() => 'https://example.com/some-image.jpg'); this.previewImages.push(...uploadedUrls); } else { // 单独一张的情况 this.fileList.push(file); // 同样假设这是实际接口调用部分... let urlFromServer = 'https://example.com/another-image.jpg'; this.previewImages.push({url: urlFromServer}); } console.log('Files after read:', this.fileList); } } }; </script> <style scoped> /* 自定义样式 */ .preview-area img{ width:80px; height:auto; margin-right:10px; } </style> ``` 上述示例展示了如下几点： - 如何设置 `v-model` 来追踪用户所选文件的状态； - 利用了 `@after-read` 方法监听每张新加入的照片，并对其进行进一步的操作比如立即提交给后台服务； - 还有就是当支持批量添加的时候需要注意区分单个还是组合作为参数传递过来的情形。 #### 注意事项 为了提升用户体验以及满足业务需求，开发者还可以考虑增加一些额外的功能点，例如进度条指示器、错误提示框等辅助控件。 ---