vant 图片地址问题 调用远程图片问题

<div v-for="(good ,i) in goods" :key="i"  >

    <van-image
            round
            width="10rem"
            height="10rem"
            :src="weburl+good.bj"
    />

</div>

返回数据

        data() {
            return {
                color: '#ff0000', //颜色拾取器
                active: 'work',
                show: false,


                goods: [],
                weburl :'http://h5.zdztb.com',


                id: this.$route.params.id, // 页面传值:商品ID

            };
        },

 

 接口数据

{"success":true,"data":{"0":{"id":"1","username":"alen","uid":"1","cid":null,"title":"蓝色底白色六边形","bj":"/upload/h5list/20200514/1589424611704482.jpg","pic":"/upload/h5list/20200514/1589424611704482-m.jpg","status":"2","created_at":"1588929574","updated_at":"1589447454"},"info":[{"id":"1","username":"alen","uid":"1","cid":"1","content":"其实自宫也未必有用","img":"","font":"雅黑","x":"100","y":"200","color":"ffffff","size":"18","quality":"100","created_at":"1588930525","updated_at":"1589000994"},{"id":"2","username":"alen","uid":"1","cid":"1","content":"梦想从这里起航梦想从这里起航梦想从这里起航 ","img":"","font":"雅黑","x":"50","y":"100","color":"ffff00","size":"20","quality":"100","created_at":"1588993581","updated_at":"1589002793"},{"id":"3","username":"alen","uid":"1","cid":"1","content":"在这里添加信息","img":"/upload/h5info/20200514/1589447446122815.jpg","font":"雅黑","x":"30","y":"30","color":"FFFFFF","size":null,"quality":null,"created_at":"1589001612","updated_at":"1589447448"}]}}

 

### 关于 `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` 方法监听每张新加入的照片,并对其进行进一步的操作比如立即提交给后台服务; - 还有就是当支持批量添加的时候需要注意区分单个还是组合作为参数传递过来的情形。 #### 注意事项 为了提升用户体验以及满足业务需求,开发者还可以考虑增加一些额外的功能点,例如进度条指示器、错误提示框等辅助控件。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值