微信小程序图片上传以及预览

由于小程序（如微信小程序、支付宝小程序等）并不是基于传统的HTML、CSS和JavaScript直接实现的，而是各自拥有自己的一套框架和组件库

一、引言

微信小程序作为一种轻量级应用，已经深入到了人们的生活中。本文将介绍如何在小程序中实现一个高级功能——图片上传与预览。此功能不仅涉及前端界面的展示，还涉及后端的数据处理与存储。

二、功能概述

用户可以在小程序中选择一张或多张图片进行上传，上传成功后，可以在小程序中预览这些图片。

三、实现步骤

1. 前端界面设计（WXML & WXSS）

使用WXML和WXSS来设计上传和预览图片的界面。例如：

<!-- wxml文件 -->  
<view class="container">  
  <button bindtap="chooseImage">选择图片</button>  
  <view wx:for="{{images}}" wx:key="index" class="image-item">  
    <image src="{{item}}" mode="aspectFill" />  
    <button bindtap="previewImage" data-src="{{item}}">预览</button>  
  </view>  
</view>

/* wxss文件 */  
.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
}  
  
.image-item {  
  display: flex;  
  flex-direction: row;  
  align-items: center;  
  justify-content: space-between;  
  margin-bottom: 20rpx;  
}  
  
image {  
  width: 200rpx;  
  height: 200rpx;  
}

2. 前端逻辑处理（JavaScript）

使用JavaScript来处理用户点击事件，调用小程序的API来实现图片的选择、上传和预览。例如：

// js文件  
Page({  
  data: {  
    images: [] // 用于存储图片的临时路径  
  },  
  chooseImage() {  
    wx.chooseImage({  
      count: 9, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
      success(res) {  
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
        this.setData({  
          images: this.data.images.concat(res.tempFilePaths)  
        });  
      }  
    });  
  },  
  previewImage(e) {  
    wx.previewImage({  
      current: e.currentTarget.dataset.src, // 当前显示图片的http链接，不填则默认为 urls 的第一张  
      urls: this.data.images // 需要预览的图片http链接列表  
    });  
  }  
});