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需要解決跨域問題。