予清沐
予清沐
  • 发布:2025-12-29 19:12
  • 更新:2025-12-29 19:13
  • 阅读:10

minio在App端上传图片方式咨询

分类:HBuilderX

后端给的是预签名接口,需要用put提交,已知上传的地址、文件名称、和uni.chooseImage获取的tempPath。当前已经实现了在网页端的上传,如下代码。

                        await this.uploadAction(uploadUrl, fileName, tempPath);```
                    async uploadAction(url, fileName, tempPath) {  
            try {  
                // 读取文件内容为 ArrayBuffer  
                const fileBuffer = await this.readFileAsArrayBuffer(tempPath);  

                // 使用 uni.request 发送 PUT 请求  
                const result = await new Promise((resolve, reject) => {  
                    uni.request({  
                        url: url,  
                        method: 'PUT',  
                        data: fileBuffer,  
                        header: {  
                            'Content-Type': 'application/octet-stream'  
                        },  
                        success: (res) => {  
                            if (res.statusCode >= 200 && res.statusCode < 300) {  
                                resolve(res);  
                            } else {  
                                console.error('上传失败响应:', res);  
                                reject(new Error(  
                                    `上传失败,状态码: ${res.statusCode}, 响应: ${res.data}`));  
                            }  
                        },  
                        fail: (err) => {  
                            console.error('上传失败错误:', err);  
                            reject(new Error('网络请求失败: ' + JSON.stringify(err)));  
                        }  
                    });  
                });  

                console.log('文件上传成功:', result);  
                uni.hideLoading();  
                return result;  

            } catch (error) {  
                console.error('上传失败:', error);  
                uni.hideLoading();  
                throw error;  
            }  
        },  
           readFileAsArrayBuffer(tempPath) {  
        return new Promise((resolve, reject) => {  
            uni.request({  
                url: tempPath,  
                method: 'GET',  
                responseType: 'arraybuffer', // 以 ArrayBuffer 格式接收  
                success: (res) => {  
                    if (res.statusCode >= 200 && res.statusCode < 300) {  
                        resolve(res.data);  
                    } else {  
                        reject(new Error(`读取文件失败,状态码: ${res.statusCode}`));  
                    }  
                },  
                fail: (err) => {  
                    reject(new Error('读取文件失败: ' + JSON.stringify(err)));  
                }  
            });  
        });  
    },
在尝试app端接口调试时通过一样的逻辑进行转换成ArrayBuffer进行图片上传,但是提示临时文件系统请求失败。想咨询app端如何进行这方面的功能实现。
                      readFileAsArrayBuffer(tempPath) {  
                           return new Promise((resolve, reject) => {  
                // 1. 请求临时文件系统:添加错误回调  
                plus.io.requestFileSystem(plus.io.PRIVATE_TEMP,   
                  (fs) => {  
                    console.log("✅ 临时文件系统请求成功");  
                    // 2. 解析路径:添加错误回调  
                    fs.root.resolveLocalFileSystemURL(tempPath,   
                      (entry) => {  
                        console.log("✅ 路径解析成功");  
                        // 3. 获取文件对象:添加错误回调  
                        entry.file(  
                          (file) => {  
                            console.log("✅ 文件对象获取成功");  
                            const reader = new plus.io.FileReader();  
                            reader.readAsArrayBuffer(file);  
                            reader.onload = (e) => {  
                              console.log("✅ 文件读取完成");  
                              resolve(e.target.result);  
                            };  
                            reader.onerror = (err) => reject(`❌ FileReader错误: ${err.message}`);  
                          },  
                          (err) => reject(`❌ 获取文件对象失败: ${err.message}`)  
                        );  
                      },  
                      (err) => reject(`❌ 路径解析失败: ${err.message}`)  
                    );  
                  },  
                  (err) => reject(`❌ 临时文件系统请求失败: ${err.message}`)  
                );  
              });  

},

2025-12-29 19:12 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

该问题请在专业群( HBuilderX技术交流群 ) 咨询,群中有相关专业的管理员和群友。

在App端实现MinIO预签名PUT上传时,不应手动读取文件系统获取ArrayBuffer,因为plus.io在部分机型存在兼容性问题。正确做法是使用uni-app官方推荐的uni.uploadFile API,它已内置对App端文件路径的处理。

解决方案:

  1. 调用uniCloud.importObject("ext-storage-co").getUploadFileOptions()获取预签名参数
  2. 直接使用uni.uploadFile传入参数,无需手动转换文件格式
  3. 关键代码示例:

    uni.chooseImage({  
    success: async (res) => {  
    const filePath = res.tempFilePaths[0];  
    const uploadOptions = await uniCloud.importObject("ext-storage-co")  
      .getUploadFileOptions({ cloudPath: `images/${Date.now()}.jpg` });  
    
    uni.uploadFile({  
      ...uploadOptions.uploadFileOptions,  
      filePath,  
      method: 'PUT', // 明确指定PUT方法  
      success: (uploadRes) => {  
        console.log('上传成功', uploadRes);  
      }  
    });  
    }  
    });

原因说明:

  • uni.uploadFile会自动处理App端临时文件路径转换
  • 避免手动调用plus.io导致的文件系统权限问题
  • 兼容HBuilderX最新版(4.87)的真机调试和云端打包

参考文档:获取前端上传参数指南
(注意:若后端要求纯PUT无表单,需在云对象中调整getUploadFileOptions返回的method参数)

内容为 AI 生成,仅供参考

要回复问题请先登录注册