今天做项目,正好遇到在小程序中需要实现从本地文件中一次选择上传多张图片,同时要支持删除和预览效果。先看下效果图:
1、上传按钮代码:
<!-- 添加图片按钮 -->
<view class="question-images-tool">
<button type="warn" bindtap="chooseImage" wx:if="{{images.length < 9}}">添加图片</button>
</view>
在button中我添加了一个按钮类型为 warn, 这个类型只是使用官方自带的样式。
wx:if="{{images.length < 9}}" 这里是最多只能上传9张图片,可根据自己的需求更改。
3、上传图片缩略图代码:
<!-- 图片缩略图 -->
<view class="question-images">
<block wx:for="{{images}}" wx:key="*this">
<view class="q-image-wrap">
<image class="q-image" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
<view class="q-image-remover" data-idx="{{index}}" bindtap="removeImage">X</view>
</view>
</block>
</view>
这里的代码是指上传后的图片代码
4、上传图片的js
import { $init, $digest } from '../utils/common.util'
const wxUploadFile = promisify(wx.uploadFile)
Page({
data: {
titleCount: 0,
contentCount: 0,
title: '',
content: '',
images: [],
}
//上传图片
onLoad(options) {
$init(this)
},
handleTitleInput(e) {
const value = e.detail.value
this.data.title = value
this.data.titleCount = value.length
$digest(this)
},
handleContentInput(e) {
const value = e.detail.value
this.data.content = value
this.data.contentCount = value.length
$digest(this)
},
chooseImage(e) {
wx.chooseImage({
count: 9,// 最多可以选择的图片张数,默认9
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'],// album 从相册选图,camera 使用相机,默认二者都有
success: res => {
const images = this.data.images.concat(res.tempFilePaths)
this.data.images = images.length <= 9 ? images : images.slice(0, 9)// 限制最多只能留下9张照片
$digest(this)
}
})
},
//删除
removeImage(e) {
const idx = e.target.dataset.idx
this.data.images.splice(idx, 1)
$digest(this)
},
//预览图片
handleImagePreview(e) {
const idx = e.target.dataset.idx
const images = this.data.images
wx.previewImage({
current: images[idx],//当前预览的图片
urls: images,//所有要预览的图片
})
},
})
以上就是上传图片及删除、预览的所有内容了,样式就不写了。可以自己根据自己的审美去调整页面美观。