微信小程序对接七牛云 上传多张图片、预览、删除 (测试可用)

微信小程序七牛图片上传，直接采用七牛社区提供的针对微信小程序的SDK；

七牛文档地址 点击传送；

七牛小程序SDK地址 点击传送

页面代码：upload.wxml

 <view class="cu-bar bg-white solid-bottom">
        <view class='action'>
            <text class='cuIcon-titles text-orange '></text> 添加图片
        </view>
    </view>
    <view class="cu-bar bg-white">
        <view class="action">
            图片上传
        </view>
        <view class="action">
            {{imgList.length}}/4
        </view>
    </view>
    <view class="cu-form-group">
        <view class="grid col-4 grid-square flex-sub">
            <view class="bg-img" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
                <image src='{{imgList[index]}}' mode='aspectFill'></image>
                <view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
                    <text class="cuIcon-close"></text>
                </view>
            </view>
            <view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
                <text class="cuIcon-cameraadd"></text>
            </view>
        </view>
    </view>

js:

const app = getApp();
var common = require('../../../utils/common.js')  // 公用方法
var qiniuUpload = require('../../../utils/qiniuUploader.js') // 七牛
var api = require('../../../utils/api.js')  // 接口地址
Page({
    data: {
        
        imgList: [],
        
    },
    // 上传图片
    ChooseImage() {
        var that = this;
        var state = 0;    // 上传第几张图片
        var imgList = []; // 保存图片数组
        
        wx.chooseImage({
            count: 4, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album'], //从相册选择
            success: (res) => {
                wx.showLoading({
                    title: '上传中...',
                })
                var uploadArr = res.tempFilePaths;  // chooseImage上传成功的数组
                var uploadNum = res.tempFilePaths.length; // 上传数组的长度
                // 
                new Promise(function (resolve, reject) {
                    for (var i = 0; i < uploadNum; i++) {
                        var random = Math.floor(Math.random() * 10000); //随机数
                        qiniuUpload.upload(uploadArr[i], (res) => {
                            state++;
                            imgList.push(res.imageURL);
                            if (state == uploadNum) {
                                resolve(imgList);
                            }
                        }, (error) => {
                            reject('error');
                            console.log('error: ' + error);
                            wx.hideLoading();
                        }, {
                                uploadURL: 'https://xx', //上传到七牛的那个存储区域，上传区域和上传区域代码一定要对应上。
                                domain: 'xx'
                                uptokenURL: api.getQnToken,  // 下载资源时用到。如果设置，在上传后的success里返回的res.ImageURL字段,是一个带http的直接可以访问的文件地址，否则需要自己拼接。
                                region: 'SCN',
                                key: 'upload/tmp/' + common.getTimeStamp() + '/' + common.getTimeStamp() + random + '.jpeg', // 图片的key(名称) 自定义
                            })
                    }
                }).then(function (imgList) {
                    // 直接赋值给imgLlist，用于展示
                    that.setData({
                        imgList: that.data.imgList.concat(imgList)
                    })
                    wx.hideLoading();
                })
               
            }
        });
    },
    // 图片预览
    ViewImage(e) {
        wx.previewImage({
            urls: this.data.imgList,
            current: e.currentTarget.dataset.url
        });
    },
    // 删除图片
    DelImg(e) {
        wx.showModal({
            title: '提示',
            content: '确定要删除这个照片吗？',
            cancelText: '再看看',
            confirmText: '确定',
            success: res => {
                if (res.confirm) {
                    this.data.imgList.splice(e.currentTarget.dataset.index, 1);
                    this.setData({
                        imgList: this.data.imgList
                    })
                }
            }
        })
    },
})

扫码预览