uni-app利用chooseImage方法封装一个图片选择组件

效果如图：
可以预览

长按可删除

可以设置最多上传数量

这里封装的组件有个MaxNumber ，number类型，用的时候在父组件传就行了，这里默认给的8

废话不多说直接上代码
封装好了之后我们用的时候只需要引入直接用就行

<template><u-form-item label="上传照片：" label-position="top"><uni-chooseimg @getPhoto="getPhoto"></uni-chooseimg> // 就在这里直接用就行了</u-form-item>
</template>
import UniChooseimg from '../../../components/uni-chooseimg/uni-chooseimg.vue'; // 导入
export default {data() {return {urlList: [] // 上传的图片}},methods: {getPhoto(value) {console.log('上传的图片', value)this.urlList = value}}
}

uni-chooseimg组件

<template><view class="uni-chooseimg"><view class="flexEnd" style="width: 84vw">{{ imageList.length }}/{{ MaxNumber }}</view><view class="flexFront"><view class="kuangPic flexRowCenter" @tap="chooseImage" style="padding-top: 10rpx;"><uni-icons type="camera-filled" color="#606266" size="50"></uni-icons></view><view class="photoStyle"><view class="photoOver" :style="{ width: picWidth }"><view class="kuangPic" v-for="(image, index) in imageList" :key="index"><image class="" :src="image" :data-src="image" @tap="previewImage" @longpress="clearImg"></image></view></view></view></view></view>
</template>
<script>
// ['拍照', '相册', '拍照或相册'
const sourceType = [['camera'],['album'],['camera', 'album']
]
// ['压缩', '原图', '压缩或原图']
const sizeType = [['compressed'],['original'],['compressed', 'original']
]
export default {props: {// 最大可上传图片数量MaxNumber: {type: Number,default: 8},// 使用相册还是相机 1 相机、2 相册、3 二者都有sourceTypeIndex: {type: Number,default: 3},// 使用原图还是压缩图 1 压缩图、2 原图、3 二者都有sizeTypeIndex: {type: Number,default: 2},},data() {return {alotPhoto: [], // 图片数组imageList: [], //  显示图片数组imageSuccess: [], //  成功之前暂存}},methods: {chooseImage() {   // 图片选择和上传console.log('显示的图片数量', this.imageList.length)if (this.imageList.length >= this.MaxNumber) {uni.showModal({title: `最多只能上传${this.MaxNumber}张图片`,content: '',showCancel: true,success: ({ confirm, cancel }) => {console.log('tishi', confirm, cancel)}})return}let url = '上传文件接口';uni.chooseImage({sourceType: sourceType[this.sourceTypeIndex],sizeType: sizeType[this.sizeTypeIndex],count: this.MaxNumber, // 最多可以选择的图片张数 默认是9success: (res) => {console.log("图片上传", res)this.imageSuccess = this.imageSuccess.concat(res.tempFilePaths);uni.uploadFile({url: url,filePath: res.tempFilePaths[0],name: 'file',formData: {},header: {"Content-Type": "multipart/form-data"},success: (res) => {console.log(12333333, res, JSON.parse(res.data));let imageInfo = JSON.parse(res.data);if (imageInfo.code == 200) {this.feng.showTips('上传成功', 'success');this.alotPhoto = this.alotPhoto.concat(imageInfo.url);this.imageList = this.imageSuccess;console.log('上传成功', this.alotPhoto);this.$emit('getPhoto', this.alotPhoto)} else if (imageInfo.code == 500) {this.feng.showTips('上传失败', 'loading');}},fail: (err) => {this.feng.showTips('上传失败', 'loading');}})},fail: (err) => {}})},// 预览图片previewImage: function (e) {console.log("预览", e)var current = e.target.dataset.srcuni.previewImage({current: current,urls: this.imageList,})},// 清除图片clearImg(e) {let that = this;let id = '';let deleteItem = e.target.dataset.src;console.log("清除图片", e, that.imageList)for (let i in that.imageList) {if (that.imageList[i] == deleteItem) {id = i;}}console.log("下标值", id)uni.showModal({title: '删除提示',content: '确认删除此图片吗',success: function (res) {if (res.confirm) {console.log('用户点击确定');that.imageList.splice(id, 1);that.alotPhoto.splice(id, 1);console.log(that.imageList);that.feng.showTips("删除成功", 'none');that.$emit('getPhoto', that.alotPhoto)} else if (res.cancel) {console.log('用户点击取消');}}});}}
}
</script>
<style lang="scss" scoped>
.uni-chooseimg {.photoStyle {width: 90vw;white-space: nowrap;overflow: hidden;overflow-y: hidden;overflow-x: scroll;margin-top: 10px;}.photoOver {display: flex;align-items: center;flex-wrap: wrap;}.kuangPic {border: 1px solid #DCDFE6;margin-right: 10rpx;width: 160rpx;height: 160rpx;display: flex;justify-content: center;align-items: center;image {width: 100%;height: 100%;}}}
</style>

直接复制，开箱即用哦。