uniapp上传多张图片

先上效果图：

 

• HTML

		<div class="upload-img-box">
			<div class="box" v-for="(item,index) in totalImg" :key=\'index\'>
				<img class="pre-img" :src="item" @click="previewImage(index)" alt=""/>
				<img class=\'delete\' src=\'https://static-c.ehsy.com/m/images/delete.png\' @click=\'deleteImg(index)\'>
			</div>
			<div class="box" id=\'fileUploadBtn\' @click="chooseImgs()" v-show="totalImg.length < 9">
				<img class=\'upload_img\' src="https://static-c.ehsy.com/m/images/addImage.png" alt="">
			</div>
		</div>

• 　　data

　　totalImg是指压缩后的图片，sourceImg是指未压缩的图片

data() {
    totalImg:[],
    sourceImg:[]          
}

• 　　js

　　　　选择多张图片

            chooseImgs:function(){
                var _this = this
                uni.chooseImage({
                    count:9,
                    sizeType:[\'original\', \'compressed\'],
                    sourceType: [\'album\'], //从相册选择
                    success:(res) => {
                        // console.log(res.tempFilePaths)
                        for(let i=0;i<res.tempFilePaths.length;i++){
                            const tempFilePaths = res.tempFilePaths[i]
                            let base64
                            uni.getImageInfo({
                                src:tempFilePaths,
                                success:function(res) {
                                    // console.log(\'压缩前\', res)
                                    _this.sourceImg.push(res.path)
                                    let canvasWidth = res.width //图片原始长宽
                                    let canvasHeight = res.height
                                    let base = canvasWidth / canvasHeight
                                    if (canvasWidth > 5000) {
                                        canvasWidth = 5000;
                                        canvasHeight = Math.floor(canvasWidth / base)
                                    }
                                    let img = new Image()
                                    img.src = res.path
                                    let canvas = document.createElement(\'canvas\');
                                    let ctx = canvas.getContext(\'2d\')
                                    canvas.width = 70
                                    canvas.height = 70
                                    ctx.drawImage(img, 0, 0, 70, 70)
                                    canvas.toBlob(function(fileSrc) {
                                        let imgSrc = window.URL.createObjectURL(fileSrc)
                                        _this.totalImg.push(imgSrc)
                                    })
                                }
                            })
                        }
                        console.log(_this.sourceImg)
                        console.log(_this.totalImg)
                    }
                })
            }

　　（1）uni.getImageInfo() 的src是string类型，指向图片的路径，一次只能处理一张图片，所以在多图情况下需要进行遍历处理。uni.getImageInfo() 参数描述如下：

 

详细返回参数及用法请移步uniapp官网相关文档：（https://uniapp.dcloud.io/api/media/image?id=getimageinfo）

　　（2）压缩图片是将图片画在canvas上面，使用canvas来进行压缩

 

 

 

 

　　　预览图片

　　uniapp提供的预览图片接口：uni.previewImage() 中的属性loop、indicator、longPressAction是APP下才生效，H5及小程序不生效。

            previewImage:function(index){
                var _this = this
                let imgSrc = _this.sourceImg
                uni.previewImage({
                    current:_this.sourceImg[index],
                    urls:imgSrc,
                    // #ifdef APP-PLUS
                    loop:true,
                    indicator:\'number\',
                    longPressActions:{
                        itemList: [\'发送给朋友\', \'保存图片\', \'收藏\'],
                        success: function(data) {
                            console.log(\'选中了第\' + (data.tapIndex + 1) + \'个按钮,第\' + (data.index + 1) + \'张图片\');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }                
                    },
                    // #endif
                    success:function(res){
                    }
                })
                
            }

　　　　删除图片

deleteImg:function(index){
    var _this = this
    _this.totalImg.splice(index,1)
    _this.sourceImg.splice(index,1)
}

　　此处特别提示，splices()会影响到原数组，如果不想影响到原数组请用silce()，splice可以用来对数组进行删除、添加和替换的操作。

　　  1. 删除    splice(index,count)

　　　　index是指删除开始的地方，count是指要删除的个数

　　  2.添加    splice(index,0,newVal)

　　　　index 是想替换的元素的位置，newVal是想要插入的项

　　  3.替换  splice(index,count,newVal)

　　　　index 是替换开始的位置，count 是想要替换的数量，newVal是想要替换的项

　　　　返回的是被替换的数组元素，具体如下：

• CSS

.upload-img-box{
            width: 100%;
            overflow: hidden;
            .box{
                width: 25%;
                height: 0;
                padding-bottom: 25%;        //   
                float: left;
                margin-top: 30px;
                text-align: center;
                position: relative;
                .pre-img{
                    left: 50%;
                    top: 0;
                    transform: translateX(-50%);
                    position: absolute;
                }
                .delete{
                    z-index: 5;
                    width: 28%;
                    position: absolute;
                    top: -12%;
                    left: 72%;
                }
            }
        }

　设置height=0、padding-bottom = 25% 是为了得到一个等宽高的div来放我们选定的图片，height索然设置为0，但是padding-bottom是相对于父元素的宽度而言的，会撑开高度，设置padding-bottom的值与宽度一致，就会生成一个宽高1比1的容器。

• 上传图片

　　调用uni.uploadFile()即可，参数说明如下：（https://uniapp.dcloud.io/api/request/network-file?id=uploadfile）

 

 　　　　小程序需要配置业务域名白名单，H5需要解决跨域问题。