微信小程序杂技之--上传一张或者多张图片

亦凉 2023-02-26 02:17 22阅读 0赞

##### 首先我们先有一个存放图片的数组 #####

这里我们用 imgList
    		data:{
    		imgList:[]
    		}

chooseImage: function () {
            let that = this;
            let imgList = that.data.imgList;
            let len = imgList.length;   //已经上传多少张，最多可传九张
            wx.chooseImage({
                count: 9 - len, //剩余可上传张数
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    console.log(res);
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    if (res.tempFilePaths.count == 0) {
                        return;
                    }
                    let tempFilePaths = res.tempFilePaths;
                    // let token = app.data.uptoken;
                    //上传图片 循环提交
                    for (let i = 0; i < tempFilePaths.length; i++) {
                        wx.uploadFile({
                            url: 'url', //此处换上你的接口地址 
                            filePath: tempFilePaths[i],
                            name: 'x', //传给后台的文件名
                            header: {   //看情况可省略
                                "Content-Type": "multipart/form-data",
                                'accept': 'application/json',
                                
                            },
                            success: function (res) {  //成功回调
                                console.log(res);
                                let data = JSON.parse(res.data); // 这个很关键
                                imgList.push(data.data.url);
                                that.setData({
                                    imgList: imgList
                                })
                            }
                        })
                    }
     
                }
            })
        },

##### 基本思路: #####

##### 使用wx.chooseImage选择后会返回tempFilePaths（数组），依次循环这个数组上传给服务器，然后拿到线上地址，赋值给imgList即可。 #####