功能描述

1.拍摄或从手机相册中选择图片上传。

2.chooseImage(e) 中的index用于判断是新增图片还是替换图片。

3.delImage(e) 删除当前index索引下的数据。

wx.chooseMedia(Object object)

属性	类型	默认值	必填	说明
count	number	9	否	最多可以选择的文件个数
mediaType	Array.<string>	['image', 'video']	否	文件类型
sourceType	Array.<string>	['album', 'camera']	否	图片和视频选择的来源
maxDuration	number	10	否	拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。
sizeType	Array.<string>	['original', 'compressed']	否	仅对 mediaType 为 image 时有效，是否压缩所选文件
camera	string	'back'	否	仅在 sourceType 为 camera 时生效，使用前置或后置摄像头
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行

object.success 回调函数

属性

类型

说明

tempFiles

Array.<Object>

本地临时文件列表

结构属性

类型

说明

tempFilePath

string

本地临时文件路径 (本地路径)

size

number

本地临时文件大小，单位 B

duration

number

视频的时间长度

height

number

视频的高度

width

number

视频的宽度

thumbTempFilePath

string

视频缩略图临时文件路径

fileType

string

文件类型

合法值	说明
image	图片
video	视频

type

string

文件类型，有效值有 image 、video、mix

wxml部分

<view class="imageList"><view class="imageItem" wx:for="{{imageList}}" wx:key="index"><image class="image"  mode="aspectFill" bindtap="chooseImage"  data-type="pictures"  data-index="{{index}}" src="{{item.url}}"  alt="" /><view class="delImage" catchtap="delImage" data-idnex="{{index}}">-</view></view><view class="imageItem addImage" bindtap="chooseImage"  data-type="pictures"></view>
</view>

wxss部分

.imageList {padding: 32rpx;width: 100vw;box-sizing: border-box;/* 弹性布局 */display: flex;flex-direction: row;justify-content: flex-start;/* 换行 */flex-wrap: wrap;/* 内容区的实际宽度为width: calc(100vw - 64rpx); width: 686rpx; */}/* 照片容器的样式 */
.imageList .imageItem {margin-bottom: 25rpx;width: 212rpx;height: 212rpx;background: #F7F9FD;border-radius: 8rpx;border: 5rpx dotted #D0D0D0;position: relative;/* overflow: hidden; */box-sizing: border-box;
}.imageList .imageItem:nth-child(3n-1) {margin: 0 25rpx;
}/* 图片的样式 */
.imageList .imageItem .image {display: block;width: 100%;height: 100%;
}/* 删除按钮的样式 */
.imageList .imageItem .delImage {width: 32rpx;height: 32rpx;border-radius: 50%;background-color: #e40606;color: #ffffff;font-size: 32rpx;text-align: center;line-height: 22rpx;position: absolute;top: -16rpx;right: -16rpx;box-sizing: border-box;
}/* 可以使用背景图 */
.imageList .addImage::before {display: block;content: "+";width: 100rpx;height: 100rpx;color: #cccccc;/* font-weight: 700; */font-size: 70rpx;text-align: center;line-height: 100rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

js部分

Page({data: {imageList: []},//选择图片chooseImage(e) {let index=e.currentTarget.dataset.indexconsole.log(index)let self = thiswx.chooseMedia({count: 9,sizeType: ['original', 'compressed'], //原图 ，压缩图sourceType: ['album', 'camera'], //从相处选择 ，使用相机success(res) {console.log("res___________",res)res.tempFiles.forEach((file) => {if(index === undefined){ //添加图片self.setData({imageList: [...self.data.imageList, {url: file.tempFilePath}]})}else{ //替换当前索引下的图片self.data.imageList[index].url=file.tempFilePathself.setData({imageList:self.data.imageList})}})}})},//删除图片delImage(e) {let {imageList} = this.datalet index = e.currentTarget.dataset.indeximageList.splice(index, 1)this.setData({imageList})}
})