uni-app中小程序上传图片进行轮播

1.选择图片（可以是相册也可以是相机）：

uni.chooseImage({
    count: '5', //相机选择图片可选择张数，默认9
    sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
    sourceType: ['album','camera'], //album 从相册选图,camera 使用相机，可以两者兼顾
    success: function (res) {
        uni.showLoading({
            title: '加载中'
        });
        const files = res.tempFilePaths；
        //这里获取到的是一个数组，如果不需要上传到服务器，可以直接把res.tempFilePaths（这是临时链接）循环到页面上；
        //因为小程序只支持单张上传，所以需要循环
        let imgUpload = files.map(img => _this.uploadFile(img));  //循环上传到服务器方法
        Promise.all(imgUpload).then(imgUpload => {
            //这里是图片全部上传成功之后的操作；
            //把图片放到页面上
            _this.imgList =[..._this.imgList,...imgUpload];//这里是将原来上传的图片与现有上传图片进行追加
        });					
    }
});

2.上传到服务器：

可以单张图片上传到服务器，然后获取链接地址，然后统一再传给后台；

uploadFile(img) {
    uni.showLoading({
        title: '加载中'
    });
    let _this = this;
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            //参数可查看官方文档
            url: `这里是后台上传地址`, 
            filePath: img, //图片链接
            name: 'file',  //默认是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);
            }
        })
    })
},

3.实现轮播图swiper（中间大，两边小）

效果：
1. 中间大，两边缩小；
2.然后左右两边缩小的中心点变化；
3.图片根据宽高比列的不同自动缩放(mode="aspectFit");

//previous-margin 左侧swiper-item露出的宽度
//next-margin 右侧露出的宽度，可以根据设计稿不同进行相应的设计

<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']">//这里判断写样式，主要是放大缩小的相对位置，使中间间距缩小很多
                            <image class="swiperImgSrc" :src="item" mode="aspectFit"></image>						
                    </view>
            </swiper-item>				
    </swiper>   
    <view class="swiperImgTips">
         {{currentIndex+1}}/{{imgList.length}}
    </view>
</view>

js部分

data() {
    return {				
        indicatorDots: false, //swiper参数
        autoplay: false, //swiper是否自动播放
        interval: 2000,  //swiper滑动时间
        duration: 500,	 //swiper滑动时间
        imgList:[], //图片列表
        currentIndex:'0',//当前图片是第几张
    }
},
methods:{
    change(e) {
       this.currentIndex = e.detail.current
   },
}

css部分

.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;
}