無刷新上傳

原理是把 File 對象封裝到 FormData，再通過 ajax 的形式提交到后端接口。直接上代碼：

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

    // 上傳進(jìn)度
    xhr.upload.onprogress = function progress(e) {
    };
    // 上傳狀態(tài)
    xhr.onload = function onload() {
    };
  
    const formData = new FormData();
    // 往 formData 里面增加要上傳的文件對象
    formData.append("filename", file);

    // 指定 api 接口和上傳方式
    xhr.open("POST", "/api/upload", true);
    // 開始發(fā)送數(shù)據(jù)
    xhr.send(formData);
}

以上是把一個 file 對象加到 formData 中，再通過 XMLHttpRequest 把 formData 發(fā)送到指定的接口 /api/upload 的一個大致過程。詳細(xì)代碼可以查看這里 https://github.com/alibaba-fu...

我們現(xiàn)實(shí)中為了可能為了兼容 ie9 , 所以還需要封裝一個 uploader，優(yōu)先支持 html5 但是在 ie9 下自動切換為 iframe 方案。

上面我們講了一個文件上傳一定是至少有兩步：1. 選擇文件 2. 上傳文件。并且我們已經(jīng)有能力根據(jù)瀏覽器自動判斷用什么兼容方案。

由此我們做出了兩個通用的組件：

Selecter 文件選擇器?？梢宰屓魏谓M件變成一個文件選擇器，并且返回選擇后的 File 對象

Uploader 文件上傳器。可以像掉 api 一樣隨心所欲的上傳選擇的文件，并且可監(jiān)控進(jìn)度。

封裝后的 Selecter 把 input 和相關(guān)事件已經(jīng)處理好了，你只需要關(guān)心往里面丟什么

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 // 進(jìn)度監(jiān)控
  });

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

因?yàn)镾electer的UI可定制，Uploader 的文件上傳時機(jī)可以隨便控制。是的 Selecter 和 Uploader 的組合得以適配任何場景和交互。調(diào)試demo 見: https://codepen.io/frankqian/...

比如我們可以通過 Uploader 自定義各種功能，比如做一個 粘貼上傳組件

去除用來裝飾的進(jìn)度條，不到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; // 獲取粘貼的文件數(shù)據(jù)
    this.uploader.startUpload(files); // 上傳文件
  };
  render() {
    return ;
  }
}

可以在這里調(diào)試代碼：https://codepen.io/frankqian/...

解決易用性的問題

Selecter 和 Uploader 使用起來雖然非常靈活，但是還是要自己寫一些邏輯，把取到的 File 對象和 Uploader 做上傳關(guān)聯(lián)。而我們在文件上傳最常用的交互方式是選擇完就開始上傳、上傳完成后給反饋。所以我們把常見的交互進(jìn)一步做提取，單按鈕、卡片、拖拽面板 等，主要把常用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
      
      
    
  }
}

以上就結(jié)合業(yè)務(wù)線常用的上傳方案和交互提取的上傳方式，我們把 Selecter 和 Uploader 進(jìn)行進(jìn)一步封裝，得到一個UI和交互相對固定的組件，使用起來更便捷。

阿里內(nèi)部各個業(yè)務(wù)線上傳的需求是多種多樣的，F(xiàn)usion Next 的 Upload 組件要考慮效率和能力之前的平衡。一個好的組件應(yīng)該通過固定組件去解決 80% 的通用問題；剩下的 20% 可能各業(yè)務(wù)線不一樣，可以通過擴(kuò)展能力讓各業(yè)務(wù)線去支持。

相關(guān)鏈接
Fusion Upload: https://fusion.design/compone...
github: https://github.com/alibaba-fu...