uni-app 使用uni-file-picker组件手机端上传图片时图片上传进度卡住 电脑端上传正常

在处理 uni-app 中使用 uni-file-picker 组件在手机端上传图片时图片上传进度卡住的问题时，我们首先需要确保几个关键方面：组件的使用方式正确、上传逻辑合理、以及处理可能的错误和异常。由于电脑端上传正常，问题很可能与手机端的特定环境或配置有关。以下是一个简化的代码示例，用于展示如何使用 uni-file-picker 组件进行图片上传，并包含一些基本的错误处理逻辑。

<template>
  <view>
    <uni-file-picker
      :files="files"
      :count="count"
      :mode="mode"
      @change="handleFileChange"
      @error="handleError"
    />
    <button @click="uploadFiles">上传</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      files: [], // 存储选中的文件
      count: 9, // 限制选择的文件数量
      mode: ['image'], // 限制只能选择图片
    };
  },
  methods: {
    handleFileChange(e) {
      this.files = e.detail.files; // 获取选中的文件
    },
    handleError(e) {
      console.error('文件选择出错:', e);
      uni.showToast({
        title: '文件选择出错',
        icon: 'none',
      });
    },
    async uploadFiles() {
      if (this.files.length === 0) {
        uni.showToast({
          title: '请先选择文件',
          icon: 'none',
        });
        return;
      }

      for (let file of this.files) {
        const uploadTask = uni.uploadFile({
          url: 'https://your-upload-url.com/upload', // 替换为你的上传接口
          filePath: file.path,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (uploadFileRes) => {
            console.log('上传成功:', uploadFileRes);
          },
          fail: (err) => {
            console.error('上传失败:', err);
            uni.showToast({
              title: '上传失败',
              icon: 'none',
            });
          },
          complete: (res) => {
            if (res.statusCode !== 200) {
              console.error('服务器响应错误:', res);
            }
          }
        });

        uploadTask.onProgressUpdate((res) => {
          console.log('上传进度:', res.progress);
          // 这里可以添加进度条显示逻辑
        });
      }
    },
  },
};
</script>

在这个示例中，我们使用了 uni-file-picker 组件来选择文件，并通过 @change 事件获取选中的文件列表。uploadFiles 方法用于上传选中的文件，使用了 uni.uploadFile API，并在上传过程中监听进度更新。

如果手机端上传卡住，可能的原因包括但不限于：

• 网络问题：检查手机网络状态，确保网络稳定。
• 服务器响应：确保服务器端能正确处理上传请求，并返回正确的响应。
• 文件大小限制：检查服务器是否有文件大小限制，以及客户端是否遵守这些限制。
• 权限问题：确保应用有访问文件系统和网络的权限。

在实际应用中，根据具体情况可能需要进一步调试和优化。