我是如何设计 Upload 上传组件的

无刷新上传

原理是把 File 对象封装到 FormData，再通过 ajax 的形式提交到后端接口。直接上代码：

function upload(file) {
    const xhr = new XMLHttpRequest();

    // 上传进度
    xhr.upload.onprogress = function progress(e) {
    };
    // 上传状态
    xhr.onload = function onload() {
    };
  
    const formData = new FormData();
    // 往 formData 里面增加要上传的文件对象
    formData.append("filename", file);

    // 指定 api 接口和上传方式
    xhr.open("POST", "/api/upload", true);
    // 开始发送数据
    xhr.send(formData);
}

以上是把一个 file 对象加到 formData 中，再通过 XMLHttpRequest 把 formData 发送到指定的接口 /api/upload 的一个大致过程。详细代码可以查看这里 https://github.com/alibaba-fu...

我们现实中为了可能为了兼容 ie9 , 所以还需要封装一个 uploader，优先支持 html5 但是在 ie9 下自动切换为 iframe 方案。

上面我们讲了一个文件上传一定是至少有两步：1. 选择文件 2. 上传文件。并且我们已经有能力根据浏览器自动判断用什么兼容方案。

由此我们做出了两个通用的组件：

Selecter 文件选择器。可以让任何组件变成一个文件选择器，并且返回选择后的 File 对象

Uploader 文件上传器。可以像掉 api 一样随心所欲的上传选择的文件，并且可监控进度。

封装后的 Selecter 把 input 和相关事件已经处理好了，你只需要关心往里面丢什么

import {Upload, Button} from "@alifd/next";
const Selecter = Upload.Selecter;

class App extends React.Comonent {
  handleSelect = (files) => {
    // get files
  }
  render() {
    return 
      Upload File
    
  }
}

如果要换成卡片样式，只要把 children 换掉即可，如下

  
   Upload File 

把 Selecter 选择后的File 给 Uploader ，可以很方便的把文件上传到指定接口。

import {Upload, Button} from "@alifd/next";
const Selecter = Upload.Selecter; // 文件选择器
const Uploader = Upload.Uploader; // 文件上传器

class App extends React.Comonent {
  uploader = new Uploader({
    action: "/api/upload",
  //onProgress: this.onProgress // 进度监控
  });

  handleSelect = (files) => {
    // 上传文件
    this.uploader.startUpload(files);
  }
  render() {
    return 
      Upload File
    
  }
}

因为Selecter的UI可定制，Uploader 的文件上传时机可以随便控制。是的 Selecter 和 Uploader 的组合得以适配任何场景和交互。调试demo 见: https://codepen.io/frankqian/...

比如我们可以通过 Uploader 自定义各种功能，比如做一个 粘贴上传组件

去除用来装饰的进度条，不到20行代码就写完了整个组件：

import { Upload, Input } from "@alifd/next";

const Uploader = Upload.Uploader; // 文件上传器

class App extends React.Component {
  uploader = new Uploader({
    action: "/api/upload",
  });
  // 处理粘贴事件
  onPaste = e => {
    const files = e.clipboardData.files; // 获取粘贴的文件数据
    this.uploader.startUpload(files); // 上传文件
  };
  render() {
    return ;
  }
}

可以在这里调试代码：https://codepen.io/frankqian/...

解决易用性的问题

Selecter 和 Uploader 使用起来虽然非常灵活，但是还是要自己写一些逻辑，把取到的 File 对象和 Uploader 做上传关联。而我们在文件上传最常用的交互方式是选择完就开始上传、上传完成后给反馈。所以我们把常见的交互进一步做提取，单按钮、卡片、拖拽面板 等，主要把常用UI和上传交互沉淀下来，方便大多的场景使用。

import {Upload, Button} from "@alifd/next";

class App extends React.Comonent {
  handleChange = (file) => {
    console.log(file.url); // 直接获取图片 url
  }
  render() {
    return 

      
        Upload File
      
      
         Upload File
      
      
    
  }
}

以上就结合业务线常用的上传方案和交互提取的上传方式，我们把 Selecter 和 Uploader 进行进一步封装，得到一个UI和交互相对固定的组件，使用起来更便捷。

阿里内部各个业务线上传的需求是多种多样的，Fusion Next 的 Upload 组件要考虑效率和能力之前的平衡。一个好的组件应该通过固定组件去解决 80% 的通用问题；剩下的 20% 可能各业务线不一样，可以通过扩展能力让各业务线去支持。

相关链接
Fusion Upload: https://fusion.design/compone...
github: https://github.com/alibaba-fu...