0


uniapp上传图片、一次性上传多张图片

uniapp官方文档

上传多张图片

upload_images() {
                let that = this;
                //这里是限制上传的图片张数
                //that.insert.images是代码的数据结构,需换成自己的数据结构
                if (that.insert.images.length >= 5) {
                    uni.showToast({
                        title: `最多只能上传${that.insert.images.length}张图片`,
                        icon: 'none',
                        mask: true,
                        duration: 1500
                    })
                } else {
                    uni.chooseImage({
                        count: 5, //默认9【一次性可以选择几张,范围1~9】

                        //可以指定是原图还是压缩图,默认二者都有
                        sizeType: ['original', 'compressed'], 

                        sourceType: ['album'], //从相册选择

                        success: (res) => {
                            const tempFilePaths = res.tempFilePaths;
                            
                            //循环遍历传入,达到一次性上传多张的效果
                            for (let i = 0; i < tempFilePaths.length; i++) {
                                uni.uploadFile({
                                    // 后端api接口
                                    url: 'https://xxxxx', 

                                    // uni.chooseImage函数调用后获取的本地文件路劲
                                    filePath: tempFilePaths[i], 

                                    name: 'file', //后端通过'file'获取上传的文件对象

                                    //这里是请求头需要携带的token数据
                                    // getStorageSync获取本地缓存的token
                                    header: {
                                        token: uni.getStorageSync('token'),
                                    },
                                    success: (uploadFileRes) => {
                                        let imgRes = JSON.parse(uploadFileRes.data);
                                        console.log(imgRes);
                                        if (imgRes.code == 0) {
                                            uni.showToast({
                                                title: imgRes.msg,
                                                icon: 'error',
                                                duration: 2000
                                            });
                                            return;
                                        }
                                        that.insert.images.push(imgRes.data.url)
                                    }
                                })
                            }
                        }
                    });
                }
            },

上传单张

//可直接去uniapp 官方文档搜索查看
uni.chooseImage({
                    count:1,
                    sizeType:['original','compressed'],
                    sourceType:['camera','album'],//camera 拍照 album 相册
                    success:(res)=> {
                        const tempFilePaths = res.tempFilePaths;
                        uni.uploadFile({
                                url: "xxxxxx",// api地址
                                filePath: tempFilePaths[0], // 本地上传完成后的路径
                                name: 'file', // 默认
                                header: {
                                "Content-Type": "multipart/form-data", // formdata提交格式
                                "token": uni.getStorageSync('token') // token验证
                            },
                            success:(uploadFileRes)=> {
                                let data = JSON.parse(uploadFileRes.data)
                                resolve(data);
                            }
                        });
                    },
                    fail(err) {
                        
                    }
                })

本文转载自: https://blog.csdn.net/weixin_47168811/article/details/128287958
版权归原作者 酸奶自由竟然重名了 所有, 如有侵权,请联系我们删除。

“uniapp上传图片、一次性上传多张图片”的评论:

还没有评论