Ember File Upload 组件升级指南与最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07798/article/details/148489002

Ember File Upload 组件升级指南与最佳实践

ember-file-upload File uploads for Ember apps 项目地址: https://gitcode.com/gh_mirrors/em/ember-file-upload

组件升级关键变化

在从Ember File Upload v4升级到v8的过程中，开发者需要注意几个重要的API变化。这些变化反映了现代Web开发的最佳实践，并提供了更灵活的解决方案。

1. 移除的allowUploadsFromWebsites参数

该参数原本用于控制是否允许从其他网站拖拽图片上传，但由于安全考虑和缺乏测试覆盖率，在v5版本中被注释掉了。虽然参数定义仍存在于代码中，但实际功能已被禁用。开发者应避免使用此参数，因为它可能在未来的版本中被完全移除。

2. 文件队列回调的变化

在旧版本中，开发者可以使用onFileAdd回调来监听文件添加事件。新版本中，这一API已被更改为onFileAdded。这是一个简单的命名变更，但需要开发者在升级时注意修改相关代码。

文件验证的新方法

弃用accept属性的原因

旧版本中的@accept属性和dropzone.valid状态已被移除，主要因为：

灵活性不足：只能基于MIME类型进行简单过滤
与现代Web应用复杂的需求不匹配
验证逻辑与UI状态耦合度过高

推荐的文件验证方案

开发者现在可以使用更灵活的filter属性和事件处理来实现复杂的验证逻辑。以下是推荐的实现模式：

// 组件JS文件
@action
preValidateFiles(files, dataTransferWrapper) {
  let isValid = true;
  
  // 使用dataTransferWrapper.itemDetails获取文件信息
  // 实现自定义验证逻辑
  
  this.set('valid', isValid); // 控制UI状态
}

{{!-- 模板文件 --}}
<FileDropzone @onDragEnter={{this.preValidateFiles}}>
  {{#if dropzone.active}}
    {{#if this.valid}}
      <div class="valid-state">文件类型有效</div>
    {{else}}
      <div class="invalid-state">请上传有效文件类型</div>
    {{/if}}
  {{/if}}
</FileDropzone>