参考：微信小程序图片上传组件 - 简书

                                                                         gif效果图，加载需要一丢丢时间

功能介绍
1.点击+框,选择并展示所选图片
2点击×删除对应图片
3.右上角0/9看到没,最多选择9张
4.点击图片放大预览,并可左右滑动切换

先来介绍一下各项数据

Page({data: {uploaderList: [],uploaderNum:0,showUpload:true}
})

uploaderList:已选择的图片临时路径数组

uploaderNum:已选择图片个数

showUpload:用来判断是否可继续选择图片,当传至9张时不可继续上传

界面布局

<!-- 容器 -->
<view class='ui_uploader_cell'><!-- 根据已选择的图片临时路径数组展示图片--><view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}"><!-- 删除--><icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/><!-- 图片--><image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image></view><!-- 上传按钮+框 --><view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"></view>
</view>

根据已选择的图片临时路径数组展示图片wx:for="{{uploaderList}}"
删除icon上挂载data数据用来删除指定图片data-index="{{index}}"
图片上挂载data数据用来点击放大展示图片data-index="{{index}}"
根据已选图片个数判断是否可继续上传wx:if="{{showUpload}}"

逻辑处理

//index.js
//获取应用实例
const app = getApp()
Page({data: {uploaderList: [],uploaderNum:0,showUpload:true},// 删除图片clearImg:function(e){var nowList = [];//新数据var uploaderList = this.data.uploaderList;//原数据for (let i = 0; i < uploaderList.length;i++){if (i == e.currentTarget.dataset.index){continue;}else{nowList.push(uploaderList[i])}}this.setData({uploaderNum: this.data.uploaderNum - 1,uploaderList: nowList,showUpload: true})},//展示图片showImg:function(e){var that=this;wx.previewImage({urls: that.data.uploaderList,current: that.data.uploaderList[e.currentTarget.dataset.index]})},//上传图片upload: function(e) {var that = this;wx.chooseImage({count: 9 - that.data.uploaderNum, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {console.log(res)// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片let tempFilePaths = res.tempFilePaths;let uploaderList = that.data.uploaderList.concat(tempFilePaths);if (uploaderList.length==9){that.setData({showUpload:false})}that.setData({uploaderList: uploaderList,uploaderNum: uploaderList.length,})}})},onLoad: function() {}
})

以下是我自己的线上版本：

上传图片组件：

index.wxml

<view class="panel-title">{{title}}</view><view class="{{uploaderList.length === 0 ? 'ui-uploader-cell':'ui-uploader-cell-other'}}"><!-- 根据已选择的图片临时路径数组展示图片--><view class='ui-uploader-item' wx:for="{{uploaderList}}" wx:key="{{index}}"><!-- 删除--><icon class='ui-uploader-item-icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="#666666" /><!-- 图片--><image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image></view><!-- 上传按钮+框 --><view class='ui-uploader' bindtap='upload' wx:if="{{showUpload}}"><image src="/images/update_img.png"></image></view><view wx:if="{{uploaderList.length === 0}}" class="title2">{{desc}}</view></view>

index.wxss

@import '/app.wxss';
.panel-title{margin-bottom: 20rpx;
}
.ui-uploader-cell-other {width: 690rpx;padding: 40rpx 0;display: flex;flex-wrap: wrap;align-content: flex-start;/* justify-content: flex-start; *//* align-items: center; */
}.ui-uploader-cell {width: 690rpx;/* padding: 20rpx 0; */display: flex;/* justify-content: flex-start; */flex-wrap: wrap;align-content: flex-start;
}.ui-uploader-item {width: 118rpx;height: 118rpx;margin-right: 18rpx;margin-bottom: 18rpx;padding-bottom: 2rpx;padding-right: 2rpx;position: relative;
}.title2 {width: 520rpx;display: flex;align-items: center;
}.ui-uploader-item-icon {position: absolute;right: 0;
}.ui-uploader {width: 120rpx;height: 120rpx;margin-right: 20rpx;background: #fff;border-radius: 16rpx;display: flex;justify-content: center;align-items: center;box-shadow: 0 0rpx 40rpx 0 rgba(0, 0, 0, 0.08);
}

index.js

// components/case-imgs/index.js
Component({/*** 组件的属性列表*/properties: {uploaderList: {type: Array,value: []},uploaderNum: {type: Number,value: 0},desc: {type: String,value: '拍照化验单、检查资料报告单、药品处方单、患处照片等。'},title: {type: String,value: '补充图片'},type: {// false 开启图文咨询  补充咨询type: Boolean,value: false}},/*** 组件的初始数据*/data: {uploaderList: [],uploaderNum: 0,showUpload: true,uploaderNowNum:0},/*** 组件的方法列表*/methods: {// 删除图片clearImg: function(e) {var nowList = []; //新数据var uploaderList = this.data.uploaderList; //原数据for (let i = 0; i < uploaderList.length; i++) {if (i == e.currentTarget.dataset.index) {continue;} else {nowList.push(uploaderList[i])continue;}}this.setData({uploaderNum: this.data.uploaderNum - 1,uploaderList: nowList,showUpload: true})this.triggerEvent('getUploaderList', {uploaderList: nowList})},//展示图片showImg: function(e) {var that = this;wx.previewImage({urls: that.data.uploaderList,current: that.data.uploaderList[e.currentTarget.dataset.index]})},//上传图片upload: function(e) {var that = this;wx.chooseImage({count: 5 - that.properties.uploaderNum, // 默认5sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {console.log(res)// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片let tempFilePaths = res.tempFilePaths;console.log(tempFilePaths)let uploaderList = that.data.uploaderList.concat(tempFilePaths);if (!that.properties.type) {//开启图文咨询if (uploaderList.length == 5) {that.setData({showUpload: false})}that.setData({uploaderList: uploaderList,uploaderNum: uploaderList.length,})that.triggerEvent('getUploaderList', {uploaderList: uploaderList})}else{// 补充咨询if (uploaderList.length + that.properties.uploaderNum === 5) {that.setData({showUpload: false})}that.setData({uploaderList: uploaderList,uploaderNowNum: uploaderList.length + that.properties.uploaderNum})that.triggerEvent('getUploaderList', {uploaderList: uploaderList,uploaderNowNum: that.data.uploaderNowNum})}}})},}
})

页面调用组件：

 <uploads-img title="上传资料" bind:getUploaderList="getUploaderList"></uploads-img>

  //获取上传图片getUploaderList(e) {this.setData({uploaderList: e.detail.uploaderList})},