Blazor移动端从Google Drive批量传图遇ERR_UPLOAD_FILE_CHANGED错误求助

错误原因 #

Google Drive在移动端提供的是临时代理文件，批量选择时，浏览器无法持续维持有效文件句柄，或者文件在上传流程中被Drive的临时机制变更，触发浏览器的文件变更检测，抛出ERR_UPLOAD_FILE_CHANGED错误。

规避方案（无需上传库） #

• 限制单次上传数量：将批量选择的文件数量限制在3-5个以内，减少浏览器同时处理Drive临时文件的压力，降低句柄失效概率。可通过JS监听文件选择事件，超出数量时提示用户调整。
• 本地转换文件为Blob：通过JS拦截文件选择事件，把选中的Drive代理文件读取为Blob，再创建新的File对象替换原文件列表，绕开Drive的临时文件机制。在Blazor组件中添加以下代码：

  <div class="col-md-6">
      <label class="col-form-label">Select Files</label>
      <input type="file" asp-for="Files" id="materialfiles" class="form-control" multiple />
      <span asp-validation-for="Files" class="text-danger"></span>
  </div>
  
  <script>
  document.getElementById('materialfiles').addEventListener('change', async (e) => {
    const files = e.target.files;
    if (!files || files.length === 0) return;
    
    const convertedFiles = [];
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const blobData = await file.arrayBuffer();
      convertedFiles.push(new File([blobData], file.name, { type: file.type }));
    }
    
    const dataTransfer = new DataTransfer();
    convertedFiles.forEach(file => dataTransfer.items.add(file));
    e.target.files = dataTransfer.files;
  });
  </script>
  

  该方法通过将Drive代理文件转为本地Blob生成的File，避免浏览器跟踪Drive临时文件的变化。
• 引导本地下载后上传：直接提示用户先将Google Drive中的文件下载到手机本地，再选择本地文件上传，这是最稳定的方案。

使用上传库的优化方案 #

如果上述规避方案无法满足需求，可以采用成熟的Blazor上传库，这类库内置了文件处理优化逻辑，能更好地兼容第三方存储文件的上传：

• Telerik UI for Blazor Upload：支持批量上传，内置文件预处理机制，可自动处理Drive临时文件的兼容性问题。
• Syncfusion Blazor Upload：提供完善的批量上传功能，包含自定义文件处理接口，轻松实现Blob转换等逻辑。

内容的提问来源于stack exchange，提问作者sapter