[移动开发]小程序云开发实现：上传多张图片到云存储，异步变同步后拿到返回的fileId，在将其保存到云数据库中

// pages/release/release.js
const db = wx.cloud.database({
    // 这里env必须是环境ID，不是环境名称，写你自己的环境ID
    env: ''
  })
Page({
    data: {
        typeOption:[
            { text: '所有', value: 0 },
            { text: '书籍', value: 1 },
            { text: '化妆', value: 2 },
            { text: '电子产品', value: 3 },
            { text: '运动', value: 4 },
        ],
        campusOption:[
            { text: '仙溪', value: 0 },
            { text: '江湾', value: 1 },
            { text: '河滨', value: 2 },
        ],
        fileList: [],
        campusValue:0,
        typeValue:0,
        title:'',
        details:'',
        price:'',
        userInfo:{},
        commodityData:{}
    },

    onLoad: function (options) {
        this.data.userInfo = wx.getStorageSync('userInfo')
    },

    //图片上传函数
    afterRead(event) {
        console.log(event)
        var fileList = this.data.fileList
        fileList.push({
            url:event.detail.file.url
        })
        this.setData({
            fileList
        })
        console.log('增加后fileList为',fileList)
    },
    //删除图片函数
    deleteImages(event){
        console.log('delete index',event)
        var fileList = this.data.fileList
        var deleteIndex = event.detail.index
        fileList.splice(deleteIndex,1)
        this.setData({
            fileList
        })
        console.log('删除后fileList为',fileList)
    },

    // 上传图片到云存储，在将返回来的fileId存进数据库
    //这里的formSubmit是wxml中form设置的属性名<form catchsubmit="formSubmit">，<button form-type="submit">上传</button>
    //button点击触发的结果
    formSubmit(event){
        var that = this
        console.log('form data',event)
        var commodityData = this.data.commodityData
        commodityData.title = event.detail.value.title
        commodityData.details = event.detail.value.details
        commodityData.price = event.detail.value.price
        if(event.detail.value.sellCampus == 0){
            commodityData.sellCampus = '仙溪'
        }else if(event.detail.value.sellCampus == 1){
            commodityData.sellCampus = '江湾'
        }else{
            commodityData.sellCampus = '河滨'
        }

        if(event.detail.value.type == 0){
            commodityData.type = '所有'
        }else if(event.detail.value.type == 1){
            commodityData.type = '书籍'
        }else if(event.detail.value.type == 2){
            commodityData.type = '化妆'
        }else if(event.detail.value.type == 3){
            commodityData.type = '电子产品'
        }else{
            commodityData.type = '运动'
        }
        let images = []
        that.saveuserinfo()

    },
    //上传云存储异步操作，拿到fileId后同步放入数据库
    //这里是重点，参考了Vant weapp中uploader文件上传中云开发示例的写法，这里最重要的是将wx.cloud.uploadFile异步变同步，等返回fileId后才能上传数据库
    saveuserinfo() {
        var that = this
        var commodityData = this.data.commodityData
        var nickName = this.data.userInfo.nickName
        const fileList = this.data.fileList;
        const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(nickName + '/' + Date.now() + '-' + Math.random() * 1000000, file));
        Promise.all(uploadTasks)
        .then(data => {
            console.log('云存储返回的数据',data)
            const newFileList = data.map(item => ( item.fileID ));
            console.log('处理云存储返回后的数据', newFileList)
            db.collection('commodityList').add({
            data:{
                images: newFileList,
                details: commodityData.details,
                title: commodityData.title,
                type: commodityData.type,
                sellCampus: commodityData.sellCampus,
                userInfo: this.data.userInfo,
                price: commodityData.price
            }
            })
            .then(res=>{
                console.log('上传数据库成功————>',res)
                wx.showToast({ title: '上传成功', icon: 'none' });
                that.setData({
                    fileList: [],
                    campusValue:0,
                    typeValue:0,
                    title:'',
                    details:'',
                    price:'',
                })
                wx.navigateTo({
                    url: '/pages/index/index',
                });
            })
        })
        .catch(e => {
            wx.showToast({ title: '上传失败', icon: 'none' });
            console.log(e);
        });
    },

    //上传云存储
    uploadFilePromise(fileName, chooseResult) {
        return wx.cloud.uploadFile({
            cloudPath: fileName,
            filePath: chooseResult.url
        });
    }

})

想了想还是贴一下该页面的wxml吧

<view class="container">
    <form catchsubmit="formSubmit" catchreset="formReset">
        <view class="title_box">
            <van-cell-group>
                <van-field name="title" model:value="{{ title }}" placeholder="商品名称" border="{{ false }}" />
            </van-cell-group>
        </view>
        <view class="details_box">
            <van-cell-group>
                <van-field name="details" type="textarea" input-class="textarea" autosize="{ maxHeight: 100px, minHeight: 50px }" model:value="{{ details }}" placeholder="请描述你想要卖出商品的详细信息" border="{{ false }}" />
            </van-cell-group>
        </view>
        <view class="chooseType">
            <view class="title">选择商品分类</view>
            <view class="chooser_box"> 
                <van-dropdown-menu class="chooser" active-color="#799e38">
                    <van-dropdown-item name="type" value="{{ typeValue }}" options="{{ typeOption }}" />
                </van-dropdown-menu>
            </view>
        </view>
        <view class="chooseCampus">
            <view class="title">选择校区</view>
            <view class="chooser_box"> 
                <van-dropdown-menu class="chooser" active-color="#799e38" >
                    <van-dropdown-item name="sellCampus" value="{{ campusValue }}" options="{{ campusOption }}" />
                </van-dropdown-menu>
            </view>
        </view>
        <view class="price_container">
            <view class="price_title">价格</view>
            <text class="price_sign">￥</text>
            <view class="price_content">
                <input name="price" class="price_input" value="{{price}}" placeholder="价格" placeholder-style="font-size:27rpx"/>
            </view>
        </view>
        <view class="upload_images">
            <van-uploader value="{{fileList}}" file-list="{{ fileList }}" deletable="{{ true }}" bind:after-read="afterRead" max-count="9" bind:delete="deleteImages" preview-size="160rpx" image-fit="aspectFill"/>
        </view>
        <button form-type="submit">上传</button>
    </form>
</view>