当前位置:首页 > 新闻动态 > 网站文章

Hbuilder中微信小程序上传多图的案例分享

来源: 浏览:134 时间:2023-08-11

1、实现效果图如下:

 描叙:最后那个加号+是上传图片的按钮。每张图片右上角有删除按钮。

我这里限定每行显示三张图片。

2、具体代码如下:

页面data()中定义一个待上传图片的数组变量 tempFiles:[],:

页面View内容:

car-list 下最后一个car-item 是我们的上传图片添加按钮。

v-for 循环 tempFiles 图片。

methods z中定义添加图片和删除图片的方法:

3、页面的CSS样式(此处样式可以根据自己需求进行调整)

4、微信上传文件的方法

注:wx.uploadFile 方法需要小程序设置,上传文件合法域名才可使用。本地测试时,微信开发者工具可以选择不校验合法域名。

关于微信小程序多图上传,各位大佬还有没有更好的方式呢?欢迎评论区留言,我们共同探讨。

地址 · ADDRESS

地址:建邺区新城科技园嘉陵江东街18号2层

邮箱:309474043@qq.Com

点击查看更多案例

联系 · CALL TEL

400-8793-956

售后专线:025-65016872

业务QQ:309474043    售后QQ:1850555641

©南京安优网络科技有限公司 版权所有   苏ICP备12071769号-4  网站地图