uni-app 全文件上传选择非原生2.0版 - lishanjun 最后一个附件上传不会触发回调

在uni-app中实现全文件上传功能，并且确保每个文件上传都能触发回调，特别是在使用非原生2.0版本组件时，我们需要仔细处理文件上传的逻辑。以下是一个示例代码，展示如何在uni-app中实现多文件上传，并确保每个文件上传完成后都能触发回调。

首先，确保你的页面或组件中包含了文件上传的UI组件，这里我们使用<input type="file">模拟文件选择，但实际应用中可能会使用uni-app提供的<picker>或第三方组件。

<template>
  <view>
    <button @click="chooseFile">选择文件</button>
    <view v-for="(file, index) in files" :key="index">
      <text>{{ file.name }}</text>
      <progress :percent="file.progress || 0"></progress>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    chooseFile() {
      uni.chooseMessageFile({
        count: 999, // 允许选择的文件数量
        type: 'all', // 可以指定文件类型，如 'image', 'video', 'file'
        success: (res) => {
          res.tempFiles.forEach(file => {
            this.uploadFile(file);
          });
        }
      });
    },
    uploadFile(file) {
      const formData = new FormData();
      formData.append('file', file.path, file.name);

      uni.uploadFile({
        url: 'https://your-server-upload-url.com', // 上传接口
        filePath: file.path,
        name: 'file',
        formData,
        success: (uploadFileRes) => {
          console.log('文件上传成功', uploadFileRes);
          // 可以在这里更新文件上传进度或状态
          this.$set(this.files, this.files.findIndex(f => f.path === file.path), {
            ...file,
            progress: 100,
            uploaded: true
          });
        },
        fail: (err) => {
          console.error('文件上传失败', err);
        },
        complete: () => {
          // 确保回调被触发，无论成功或失败
          console.log('文件上传完成', file.name);
        }
      });
    }
  }
};
</script>

<style>
/* 样式根据需求自定义 */
</style>

在上述代码中，我们使用了uni.chooseMessageFile来选择文件，并遍历选中的文件列表进行上传。每个文件上传时，我们都创建了一个新的FormData对象，并将文件添加到其中。然后，通过uni.uploadFile方法上传文件，并在成功、失败和完成时分别处理回调。

注意，为了确保每个文件上传完成后都能触发回调，我们在complete回调中记录了文件上传的完成状态。同时，我们使用this.$set来确保Vue能够检测到文件列表的变更，并更新视图。

这种方法可以有效地解决最后一个附件上传不会触发回调的问题，因为每个文件的上传都是独立处理的。