微信小程序实现多张图片的一次性上传，删除，预览，点击按钮上传至云存储

Mad Idea

于 2019-09-29 11:45:34 发布

阅读量4.5k

点赞数 14

文章标签：微信小程序图片上传删除预览

本文链接：https://blog.csdn.net/szy_fasheng/article/details/101678492

版权

本文介绍了一个小程序中实现多图片选择、预览、删除和上传至云存储的功能。通过wxml和wxss布局，实现了直观的用户界面，js逻辑处理图片操作，包括选择、预览、删除和上传流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能

实现从本地文件中一次选择上传多张图片
长按可删除图片
单击可预览图片
点击按钮上传至小程序云平台的云存储中(自行借鉴)

应用场景

租售、分享、交友等平台中图片的选择与上传

代码实例

效果图
.wxml文件

<text class="word-class">上传图片实例：</text>
<!--以下为图片选择-->
<view class="img_box">
  <view class="imgs" wx:for="{
    {tempFilePaths}}" wx:key="index">
    <image src='{
    {item}}' bindlongpress="DeleteImg" bindtap="PreviewImg" data-index="{
    {index}}" mode='widthFix' />
  </view>
  <view class="imgs">
    <view class="images" bindtap="ChooseImg">
      <!--这里自行创建image文件夹，并添加choose.png，及中部加号-->
      <image src