1. Select an image (either an album or a camera) :

uni.chooseImage({
    count: '5'.// Select the number of images to select, default 9
    sizeType: ['compressed'].// Default: original, compressed
    sourceType: ['album'.'camera'].// If you want to use a camera, you can do both
    success: function (res) {
        uni.showLoading({
            title: 'Loading'
        });
        constFiles = res. TempFilePaths;If you don't want to upload it to the server, you can loop res.tempFilepaths directly to the page.
        // Because the applet only supports single sheet upload, it needs to loop
        let imgUpload = files.map(img= > _this.uploadFile(img));  // Loop upload to the server method
        Promise.all(imgUpload).then(imgUpload= > {
            // Here is the operation after all the images have been uploaded successfully;
            // Put the picture on the page
            _this.imgList =[..._this.imgList,...imgUpload];// Append the original uploaded image to the existing uploaded image}); }});Copy the code

2. Upload to server:

You can upload a single picture to the server, and then get the link address, and then unified to the background;

uploadFile(img) {
    uni.showLoading({
        title: 'Loading'
    });
    let _this = this;
    return new Promise((resolve, reject) = > {
        uni.uploadFile({
            // The parameters can be viewed in the official document
            url: 'Here is the background upload address'.filePath: img, // Image links
            name: 'file'.// The default is file
            header: {
                "Content-Type": "multipart/form-data"."accept": 'application/json'
            },
            success: (res) = > {
                let data = JSON.parse(res.data)
                if(data.code==200) {if(data.data.return_code==1){ resolve(data.data.imageUrl); }}},fail:(res) = >{ reject(res); }})})},Copy the code

3. Swiper (large in the middle, small on both sides)

Effect:

1. The middle is large and the sides are narrowed;

2. Then change the reduced center points on the left and right sides;

(mode=”aspectFit”)

//previous-margin: swiper-item width; //next-margin: swiper-item width

<view class="imgContainer">
    <swiper class="swiperImg" @change="change" :current="currentIndex" previous-margin="63rpx"  next-margin="63rpx" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item class="swiperImgItem"  v-for="(item,index) in imgList" :key="index">
                    <view :class="['swiperImgConter',index==currentIndex?'':index>currentIndex?'imgScaleSmallLeft':'imgScaleSmallRight']">// In this case, it is important to zoom in and out, so that the middle space is much smaller<image class="swiperImgSrc" :src="item" mode="aspectFit"></image>						
                    </view>
            </swiper-item>				
    </swiper>   
    <view class="swiperImgTips">
         {{currentIndex+1}}/{{imgList.length}}
    </view>
</view>
Copy the code

Js part

data() {
    return {				
        indicatorDots: false./ / swiper parameters
        autoplay: false.//swiper specifies whether to automatically play
        interval: 2000.//swiper Swiping time
        duration: 500.//swiper Swiping time
        imgList: [].// The list of images
        currentIndex:'0'.// What is the number of the current picture}},methods: {change(e) {
       this.currentIndex = e.detail.current
   },
}
Copy the code

The CSS part

.imgContainer{
        position:absolute;
        left:0;
        top:150rpx;
        right:0;
        height:850rpx;
        width:100%;
}
.swiperImgTips{
        color:#fff;
        text-align: center;
        font-size:36rpx;
        margin-top:30rpx;
}
.swiperImg{
        height:760rpx;
        width:100%;
}
.swiperImgItem{
    width: 600rpx;
    box-sizing: border-box;
    position:relative;
    .swiperImgConter{			
            box-sizing: border-box;
            padding:20rpx 0 0 20rpx;
    }
    .swiperImgSrc{
            border:1px solid rgba(255.255.255.0.5);
            width:582rpx;
            height:720rpx;
            display: block;			
            background: rgba(0.0.0.0.5);
    }		
}
.imgScaleSmallLeft{
        transform-origin: left center;
        transform:scale(0.8);
        transition: 0.5s;

}
.imgScaleSmallRight{
        transform-origin: right center;
        transform:scale(0.8);
        transition:all 0.5s;
}
Copy the code