uni-app uni-file-picker 上传文件时进度未达100%即显示上传成功，但实际并未成功。

uni-app uni-file-picker 上传文件时进度未达100%即显示上传成功，但实际并未成功。

示例代码：

<uni-file-picker ref="files" :auto-upload="false" limit="1" @delete="deleteFile" @select="select"  
                @progress="progress" @success="success" @fail="fail" file-mediatype="all"  
                title="选择要上传的文件"></uni-file-picker>  
<button v-if="hasSelect" class="btn_upload" type="primary" size="mini" @click="upload">上传文件</button>

操作步骤：

  • uni-file-picker - 上传一个视频

预期结果：

  • 正常上传

实际结果：

  • 在进度没有达到100之前就已经显示上传成功了。

bug描述：

uni-file-picker 上传文件时进度并没有到100，就显示上传成功。但是并没有成功。

选择文件：

{
  "index": 0,
  "progress": 2,
  "tempFile": {}
}

选择文件：

{
  "index": 0,
  "progress": 2,
  "tempFile": {}
}

选择文件：

{
  "index": 0,
  "progress": 2,
  "tempFile": {}
}

App.vue:49 App Hide

选择文件：

{
  "index": 0,
  "progress": 2,
  "tempFile": {}
}

选择文件：

{
  "index": 0,
  "progress": 3,
  "tempFile": {}
}

上传成功

{
  "tempFiles": [
    {
      "extname": "mp4",
      "name": "大于60s.mp4",
      "path": "blob:http://localhost:8080/a819ccd1-1176-4deb-a1dd-832233e041df",
      "size": 8444417,
      "fileID": "",
      "url": "",
      "uuid": 1709274102890,
      "status": "success",
      "cloudPath": "1709274102888_0.mp4"
    }
  ],
  "tempFilePaths": [""]
}

当前进度才百分之三。


更多关于uni-app uni-file-picker 上传文件时进度未达100%即显示上传成功，但实际并未成功。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-file-picker 上传文件时进度未达100%即显示上传成功，但实际并未成功。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 的 uni-file-picker 组件时，如果遇到文件上传进度未达到 100% 就显示上传成功，但实际并未成功的情况，可能是由于以下几个原因导致的：

1. 服务器响应问题

上传文件时，服务器可能在文件还未完全上传完成时就返回了成功响应。这可能是由于服务器配置问题或者上传逻辑实现有误。

解决方案：

  • 检查服务器端的上传逻辑，确保文件完全上传后再返回成功响应。
  • 使用 onProgress 事件监听上传进度，确保进度达到 100% 后再处理成功逻辑。

2. 网络问题

网络不稳定可能导致文件上传过程中断，但前端误以为上传成功。

解决方案：

  • 在网络不稳定的情况下，增加重试机制，确保文件能够完整上传。
  • 使用 onProgress 事件监听上传进度，确保进度达到 100% 后再处理成功逻辑。

3. 前端逻辑问题

前端可能在文件上传过程中错误地触发了成功回调。

解决方案：

  • 确保在上传进度达到 100% 后再触发成功回调。
  • 使用 onProgress 事件监听上传进度，确保进度达到 100% 后再处理成功逻辑。

4. uni-file-picker 配置问题

uni-file-picker 组件的配置可能存在问题，导致上传进度未达到 100% 就触发了成功回调。

解决方案：

  • 检查 uni-file-picker 的配置，确保 onSuccess 回调在上传进度达到 100% 后再触发。
  • 使用 onProgress 事件监听上传进度，确保进度达到 100% 后再处理成功逻辑。

示例代码

以下是一个使用 uni-file-picker 并监听上传进度的示例代码：

<template>
  <view>
    <uni-file-picker
      ref="filePicker"
      :auto-upload="true"
      :on-success="handleSuccess"
      :on-progress="handleProgress"
    ></uni-file-picker>
  </view>
</template>

<script>
export default {
  methods: {
    handleSuccess(res) {
      console.log('上传成功', res);
    },
    handleProgress(event) {
      console.log('上传进度', event.progress);
      if (event.progress === 100) {
        // 进度达到 100% 后处理成功逻辑
        this.$refs.filePicker.uploadSuccess();
      }
    }
  }
};
</script>
回到顶部