uni-app 使用uni.chooseImage选择图片后获取的临时地址偶发性的无法上传到java后端

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 使用uni.chooseImage选择图片后获取的临时地址偶发性的无法上传到java后端

操作步骤:

  • 直接上传图片即可

预期结果:

  • 正常上传

实际结果:

  • file获取到是null

bug描述:

  • 偶发性的,非必现,但是用户量大了,每天都不间断的报错,也影响用户使用
  • uni.chooseImage上传图片时临时路径就失效了,无法读取到图片,导致后端无法获取到文件,也就没法上传
  • 前端代码在code里面,
  • 后端代码很简单在图片上
  • 刚开始怀疑没有拿到路径,但增加日志后发现已经拿到了
提交的地址如下:file:///storage/emulated/0/Android/data/cn.shouqilai/apps/__UNI__5361F1A/doc/uniapp_temp/compressed/1734340358010_20241216_171110.jpg TraceId:15949134314274560  
  • 但是MultipartFile file 的file是null

附件

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 Windows 10
HBuilderX 正式
HBuilderX版本 4.41
手机系统 Android
手机系统版本 Android 15
手机厂商 华为
手机机型 小米
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

2 回复

希望协助帮忙排查下


在处理 uni-app 使用 uni.chooseImage 选择图片后获取的临时地址偶发性无法上传到 Java 后端的问题时,我们需要确保前端和后端的处理都尽可能稳定和可靠。以下是一些代码示例和注意事项,可以帮助你排查和解决这个问题。

前端(uni-app)

首先,确保在调用 uni.chooseImage 后,你正确地获取了图片的临时文件路径,并尝试上传。以下是一个简单的示例:

uni.chooseImage({
    count: 1, // 选择图片的数量
    success: function (res) {
        const tempFilePaths = res.tempFilePaths;
        if (tempFilePaths.length > 0) {
            const filePath = tempFilePaths[0];
            uploadImage(filePath);
        }
    },
    fail: function (err) {
        console.error('选择图片失败:', err);
    }
});

function uploadImage(filePath) {
    uni.uploadFile({
        url: 'https://your-backend-url.com/upload', // 后端接收文件的接口
        filePath: filePath,
        name: 'file',
        success: function (uploadFileRes) {
            const data = JSON.parse(uploadFileRes.data);
            console.log('上传成功:', data);
        },
        fail: function (err) {
            console.error('上传失败:', err);
        }
    });
}

后端(Java)

在后端,确保你的 Java 代码能够正确处理文件上传。这里是一个使用 Spring Boot 框架处理文件上传的示例:

@RestController
@RequestMapping("/upload")
public class FileUploadController {

    @PostMapping
    public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
        try {
            // 保存文件到服务器
            String uploadDir = "path/to/upload/dir/";
            File dest = new File(uploadDir + file.getOriginalFilename());
            file.transferTo(dest);

            return ResponseEntity.ok("文件上传成功");
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("文件上传失败");
        }
    }
}

注意事项

  1. 临时文件有效期uni.chooseImage 返回的临时文件路径有有效期,确保在有效期内上传。
  2. 网络问题:检查网络是否稳定,尝试添加重试机制。
  3. 文件大小限制:后端和前端都可能对文件大小有限制,确保配置合理。
  4. 跨域问题:如果前后端分离部署,确保处理了跨域请求。
  5. 日志记录:在前后端都添加详细的日志记录,帮助定位问题。

通过上述代码和注意事项,你应该能够更准确地定位和解决问题。如果问题依然存在,可能需要进一步检查具体的错误日志或网络环境。

回到顶部