uniapp批量上传图片和视频

  1. uniapp实现图片视频批量上传
  2. 一般这种批量上传 后端处理会比较好 目前此文章 只展示前端实现 前端需要循坏调用上传的接口 一般也不建议前端批量的去调用这个接口 会对网络资源造成较大压力,甚至可能导致浏览器或服务器出现性能问题。如果服务器端对并发请求有限制,这种方式可能会导致部分请求失败。

核心代码 如下

fileUpdate() {
				console.log('开始上传,videoList:', this.videoList);
				console.log('开始上传,imageList:', this.imageList);
			    uni.showLoading({
			        mask: true,
			        title: "上传中..."
			    });
			    let _this = this;
			    let filePaths = this.videoList.concat(this.imageList);
			    console.log("filePaths-----------", filePaths);
			    if (filePaths.length === 0) {
			        uni.showToast({
			            icon: "none",
			            title: "暂无需要上传的"
			        });
			        return;
			    }
			    let uploadNum = filePaths.length;
			    let api = AppConfig.SERVICE_URL +   "你的后端接口";
			
			    // 定义一个递归函数来依次上传文件
			    function uploadNext(index) {
			        if (index >= filePaths.length) {
			            uni.hideLoading();
			            if (_this.videoList.length > 0 || _this.imageList.length > 0) {
							console.log('未上传成功的视频列表:', _this.videoList);
							console.log('未上传成功的图片列表:', _this.imageList);
			                // uni.showToast({
			                //     title: "部分影像未上传成功,请再次保存!",
			                //     icon: "none",
			                // });
							this.videoList=[]
							this.imageList=[]
			            } else {
			                uni.showToast({
			                    title: "上传完成!",
			                    icon: "none",
			                });
			            }
			            return;
			        }
			
			        let item = filePaths[index];
			        item.fileName = _this.getFileName(item.tempFilePath);
			        console.log("filePaths22222222", item.fileName);
			        let formData = {
			            token: "",
			            channelCode: "xcx",
			            objectNo: _this.businessNumber,
			            objectType: "xxxx",
			            objectName: "xxxxx",
			            queryTime: _this.reportDate,
			            itemno: "2901",
			            longitude: _this.longitude,
			            latitude: _this.latitude,
			            address: _this.address,
			            fileName: item.fileName,
			            Method: 'upload',
			            Action: 'upload'
			        };
			
			        uni.uploadFile({
			            url: api,
			            filePath: item.tempFilePath,
			            name: 'file',
			            formData: formData,
			            success: (res) => {
			                try {
			                    res.data = JSON.parse(res.data);
			                    if (res.data.result === 'SUCCESS') {
			                        _this.removeSuccessFile(res.data.fileName);
									_this.$forceUpdate(); // 强制更新组件
			                    }
			                } catch (e) {
			                    // 处理解析异常
			                }
			            },
			            fail: (err) => {
			                console.log("err", err);
			                uni.showToast({
			                    title: err.errMsg,
			                    icon: "none"
			                });
			            },
			            complete: () => {
			                uploadNext(index + 1);
			            }
			        });
			    }
			
			    // 开始上传第一个文件
			    uploadNext(0);
			},

这里就结束啦

扩展一下: 前端批量实现单个接口的调用 比如 全选 取消购物车

      batchCancelCart() {
    // 从this.dataList[2]中筛选出被选中的商品项(selected为true的项)
    const selectedItems = this.dataList[2].filter(item => item.selected);
    // 如果没有选中的商品项,直接返回,不进行后续操作
    if (selectedItems.length === 0) {
        return;
    }
    // 弹出确认对话框,询问用户是否确认批量取消商品的购物车
    this.$confirm('是否确认批量取消商品的购物车?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 对于每个被选中的商品项,创建一个删除请求的Promise数组
        const requests = selectedItems.map(item => {
            return this.$api.deleteFavorite({
                id: item.favoriteId
            }).then(res => {
                // 如果请求成功(status_code为1)
                if (res.status_code === 1) {
                    // 找到该商品项在this.dataList[2]中的索引
                    const index = this.dataList[2].findIndex(i => i.id === item.id);
                    // 如果索引存在(大于 -1),从this.dataList[2]中删除该商品项
                    if (index > -1) {
                        this.dataList[2].splice(index, 1);
                    }
                    // 返回请求结果
                    return res;
                } else {
                    // 如果请求失败,返回一个被拒绝的Promise,携带错误信息
                    return Promise.reject(res.msg);
                }
            }).catch(error => {
                // 捕获请求过程中的错误,返回一个被拒绝的Promise,携带错误信息
                return Promise.reject(error);
            });
        });

        // 并行执行所有请求,并等待所有请求完成(无论成功或失败)
        Promise.allSettled(requests).then(results => {
            // 统计成功的请求数量
            const successCount = results.filter(result => result.status === 'fulfilled').length;
            // 统计失败的请求数量
            const failedCount = results.filter(result => result.status === 'rejected').length;

            // 如果有成功的请求,显示成功消息
            if (successCount > 0) {
                this.$message({
                    message: `成功取消 ${successCount} 项商品的购物车`,
                    type: 'success'
                });
            }

            // 如果有失败的请求,拼接错误信息并显示错误消息
            if (failedCount > 0) {
                const errorMessages = results
                   .filter(result => result.status === 'rejected')
                   .map(result => result.reason)
                   .join(';');
                this.$message.error(`部分取消失败:${errorMessages}`);
            }

            // 更新全选状态,判断是否所有商品项都被选中
            this.isAllSelected = this.dataList[2].length > 0 && this.dataList[2].every(item => item.selected);
        });
    }).catch(() => {
        // 用户取消操作时执行的代码,这里没有具体逻辑,仅作为占位
    });
},
### 如何在 UniApp 中实现文件上传的封装方法 为了实现在 UniApp 应用程序中的文件上传功能,可以通过创建一个通用的方法来处理不同类型的文件上传需求。此方法不仅限于图片,还可以用于音频、视频等其他文件类型。 #### 创建 `uploadFile` 方法 定义一个名为 `uploadFile` 的函数,该函数接收本地路径作为参数并返回 Promise 对象以便异步操作: ```javascript function uploadFile(filePath) { return new Promise((resolve, reject) => { uni.uploadFile({ url: 'https://example.com/upload', // 替换成实际的服务端地址[^2] filePath, name: 'file', formData: {}, // 如果有额外的数据要一起提交给服务器,则在此处添加键值对 success(uploadRes) { resolve(JSON.parse(uploadRes.data)); }, fail(error) { reject(error); } }); }); } ``` 上述代码片段展示了如何通过调用 `uni.uploadFile()` API 来执行文件上传任务,并利用 JavaScript Promises 处理成功或失败的结果。 #### 使用封装好的 `uploadFile` 函数 当需要使用这个封装后的上传逻辑时,可以在页面组件或其他地方简单地调用它。下面是一个例子,在用户选择了图像之后立即触发上传动作: ```javascript methods: { chooseAndUploadImages() { let that = this; uni.chooseImage({ count: 9 - that.imgList.length, // 默认最多选九张照片 sizeType: ['original'], // 只允许选择原始大小的照片 sourceType: ['album'], // 仅从相册选取 success(async function(res) { const tempFilePaths = res.tempFilePaths; for (let i = 0; i < tempFilePaths.length; i++) { try { const result = await uploadFile(tempFilePaths[i]); that.imgList.push(result); // 假设这里存储的是上传成功的响应数据 } catch (error) { console.error('Failed to upload file:', error); } } }) }); } } ``` 这段代码说明了怎样结合 `chooseImage` 之前定义的 `uploadFile` 方法完成多张图片的选择与批量上传工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值