持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

前言

在使用uniapp开发项目的时候，我们经常需要选择照片上传到后台，上传的过程中也有一系列的限制，图片张数的限制，图片大小的限制，点击实现预览照片等等，那么我们就来实现这个功能

选择照片

上传照片我们可以使用uniapp内置的uni.chooseImage(OBJECT) API，这个api的作用是从本地相册选择图片或使用相机拍照

我们先准备一个上传照片的按钮

<view class="upload-btn" @click="choose">
        <image src="/static/imgs/my/upload.png" mode=""></image>
</view>

点击上传的时候调用这个api，设置选择图片的张数，我们默认设置上传图片的张数为5张

choose(){
        let that=this
        uni.chooseImage({
                count:5,
                success(res) {
                        console.log(res);
                },
                fail(err) {
                        console.log(err);
                }
        })
},

我们看看success回调函数返回的结果，可以发现有两个数组，一个存放图片的本地文件路径列表，一个存放图片的本地文件列表，每一项是一个 File 对象，所以我们准备两个数组接收返回的结果，一个用来展示图片，一个用来存放文件对象

that.uploadPreviewList=res.tempFilePaths
that.uploadList=res.tempFilePaths

但是现在有一个问题，继续选择图片的话下一次的结果就会覆盖掉上一次，所以不能直接赋值，使用concat()将两个数组合并起来，但是最多存放5张图片，所以合并之后还得去掉多余的图片

that.uploadPreviewList=that.uploadPreviewList.concat(res.tempFilePaths)
that.uploadList=that.uploadList.concat(res.tempFilePaths)
that.uploadPreviewList.splice(5)
that.uploadList.splice(5)

可以看见图片最多显示5张，继续添加图片也不会超过5张

考虑更周到的话可以给每一张图片下面带有删除的图标，绑定一个删除方法传入当前点击图片的下标

remove(i){
        this.uploadList.splice(i,1)
        this.uploadPreviewList.splice(i,1)
},

预览图片

预览图片也有现成的api uni.previewImage(OBJECT)，只需给图片绑定绑定一个方法传入当前图片下标，在里面调用就可以实现预览了

preview(i){
        let urls=this.uploadPreviewList
        uni.previewImage({
                current:i,//当前显示图片的链接/索引值
                urls,//预览的图片列表
        });
},

限制图片大小

如果有限制图片大小的要求，在选择完图片上传时判定图片的大小，超出就return出去不进行上传操作

let uploadSize=0
//file对象里有size属性，为图片大小
this.uploadList.forEach(item=>{
        uploadSize+=item.size
})
//1m=1024kb，1kb=1024字节
if(uploadSize/1024/1024>10){//假设图片大小总和最大10m
        uni.showToast({
                title:'总大小超出10M!',
                icon:"none"
        })
        return 
}