微信小程序如何实现上传多张图片、删除图片-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

创新互联拥有十年成都网站建设工作经验,为各大企业提供网站制作、成都网站设计服务，对于网页设计、PC网站建设（电脑版网站建设）、成都App定制开发、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、域名注册等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

这篇文章将为大家详细讲解有关微信小程序如何实现上传多张图片、删除图片，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

效果图：

本来用的是小程序提供的 mp-uploader 上传图片的组件，无奈次组件删除效果不是我想要的，只能用 wx.chooseImage进行上传图片，在使用uplaodFile将图片发送给后台服务器。

下面直接展示代码：

wxml:

<view class="con_titles">
 <view class="con_left">
  <image src="../../images/comint.png"></image>
  <text class="titles_t">患者病历</text>
 </view>
 <view class="img_num">{{imgShow.length}}/6</view>
 
 </view>
 <view class="page__bd">
 <!-- <mp-uploader style='color:#353535' bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="6" title="患者病历"></mp-uploader> -->
 
 <view class="add-image">
  <view class="images-boxc" wx:for="{{imgShow}}" wx:for-item="item" wx:key="image">
  <image class="image_size" data-index="{{index}}" data-src="{{item}}" src="{{item}}" bindtap="clickImage"></image>
  <image class="delete-image" data-index="{{index}}" src="../../images/delete_img.png" bindtap="deleteImage"></image>
  </view>
  <view class="images-add" wx:if="{{imgShow.length<6}}">
  <image class="image_size image_sizen" src="../../images/add_img.png" bindtap="chooseImage"></image>
  </view>
 </view>
</view>

分享标题：微信小程序如何实现上传多张图片、删除图片-创新互联
网页地址：https://www.cdcxhl.com/article24/djpjje.html

成都网站建设公司_创新互联，为您提供小程序开发、品牌网站制作、App开发、网站设计公司、ChatGPT、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联