摘要：項目上也用到很多上傳文件的地方，七牛云，阿里云，訊飛上傳都接觸過，所以在這里做一個記錄，總結一下前端上傳的幾種方式。類型的文件名七牛云上傳淺析是一個基于七牛開發的前端。

圖片，音頻，視頻等等這幾種常見的資源類型，如果需要從前端上傳到服務端，有幾種方式呢？不妨回顧一下經歷過的項目想一想。

項目上也用到很多上傳文件的地方，七牛云，阿里云OSS，訊飛web api上傳都接觸過，所以在這里做一個記錄，總結一下前端上傳的幾種方式。

上傳基本概念

常見前端上傳場景

自家后端服務上傳淺析

阿里云OSS上傳淺析

七牛云上傳淺析

幾種上傳服務的對比

思考

File對象可以通過,DataTransfer, 或者HTMLCanvasElement.mozGetAsFile()

new File(bits, name[, options])此處的bits是一個數組，數組元素可以由ArrayBuffer，ArrayBufferView，Blob或者DOMString組成；fileName指明文件名稱或者文件路徑；options里的type屬性指明MIME類型，lastModified屬性指明上次修改時間，默認是Date.now();

鍵值對形式的表單，可被XMLHttpRequest.send()直接發送

編碼格式指定為multipart/form-data也需要用FormData組裝數據 其實就是http的request header指定了 {Content-Type: "multipart/form-data"}

append(key,value)向FormData中添加數據，存在覆蓋不存在新建

可以參考我的另一個記錄：blob Url那些事兒

原生File對象。使用場景：本地上傳的圖片，音頻，視頻等文件，沒有經過任何其他處理。

轉換后的Blob對象。使用場景：圖片canvas合成后的base64轉換為Blob對象；音頻通過麥克風錄音算法生成的Uint8Array轉換成Blob對象。

字節數組。使用場景：音頻通過麥克風錄音算法生成arrayBuffer再轉換成Uint8Array。

tips:

七牛云 qiniu-js 和 阿里云OSS ali-oss支持Blob對象的上傳方式。

訊飛web api文件分片上傳使用字節數組的方式。

看似File對象和Blob對象是2種上傳方式，但其實是1種上傳方式，因為File對象繼承自Blob對象，可以把上述兩種上傳統一理解成上傳Blob對象。

const formData = new FormData(); // 由于服務端編碼格式為multipart/form-data，所以需要構造一個FormData對象
const file = new File([blobObj], fileName, { type: blobObj.type }); // 傳入blob對象創建一個File實例
formData.append("file", file);// formData實例增加file對象
const options = {
    method: "post",
    url: "https://foo.bar.com/baz",
    headers: { "Content-Type": "multipart/form-data" }, // 上傳相關
    data: formData, // 上傳相關
};
axios.request(options).then(()=>{}).catch(()=>{});

ali-oss是一個Node環境和Browser環境皆可用的對象存儲服務package。

import OSS from "ali-oss";
const token = apiNode.generateOssToken({ type }) // 調用nodejs端接口，根據類型生成某個bucket有效的token
this.client = new OSS(token);
const blobObj = new Blob([u8arr], { type: mime });
this.client
    .put(fileName, blobObj) // 這里我們傳入的值blob對象，ali-oss僅支持瀏覽器端的Blob對象
    .then((data) => {
      if (data && data.name) {
        return data.name; // OSS返回的文件名
      }
    })
    .catch(() => {});

可以再偽代碼基礎上用document.cookie設置token的有效時長；上傳重試等等護航功能。

關鍵是ali-oss SDK的put方法，它主要用來向bucket添加一個object。

.put(name, file[,options])

name String類型的文件名
{String|Buffer|ReadStream|File(only support Browser)|Blob(only support Browser)} object local path, content buffer or ReadStream content instance use in Node, Blob and html5 File

qiniu-js是一個基于七牛API開發的前端SDK。

import * as qiniu from "qiniu-js";
const putExtra = { fname: "", params: {}, mimeType: null };// fname文件原文件名，params自定義變量，mimeType數組，限制文件上傳類型
const config = {
  useCdnDomain: true, // 表示是否使用 cdn 加速域名
  disableStatisticsReport: false, // 是否禁用日志報告，為布爾值，默認為 false
  retryCount: 5, // 上傳自動重試次數（整體重試次數，而不是某個分片的重試次數）；默認 3 次（即上傳失敗后最多重試兩次）；目前僅在上傳過程中產生 599 內部錯誤時生效，但是未來很可能會擴展為支持更多的情況
  region: qiniu.region.z0, // 選擇上傳域名區域；當為 null 或 undefined 時，自動分析上傳域名區域
};
const token = apiNode.generateOssToken({ type }) // 調用nodejs端接口，根據類型生成某個bucket有效的token
this.observable = qiniu.upload(obj.file, obj.fileName, token, putExtra, config);
this.observable.subscribe({
  next: (res) => {
    this.emit("progress", Math.ceil(res.total.percent));
  },
  error: (err) => {
    this.clear();
    this.emit("error", err, obj.imgName);
  },
  complete: (res) => {
    this.clear();
    this.emit("complete", res.hash, obj.imgName);
  },
});

關鍵是qiniu-js SDK的upload方法，它是上傳的核心。

qiniu.upload(file: blob, key: string, token: string, putExtra: object, config: object): observable
file: Blob 對象，上傳的文件
key: 文件資源名
token: 上傳驗證信息，前端通過接口請求后端獲得
config: 包括cdn加速，日志報告，上傳區域名，上傳自動重試次數，分片上傳的請求并發數，MD5校驗等等
putExtra: 自定義的一些內容

其次就是這個上傳成功后的返回的observable對象，在其中可以做一些上傳后的處理。

這個方法本身是一個observable對象，有subscribe方法，主要有next和error，complete三個事件。

next: 接收上傳進度信息，res是一個帶有 total 字段的 object，包含loaded、total、percent三個屬性，提供上傳進度信息。
error:上傳錯誤后觸發；自動重試本身并不會觸發該錯誤，而當重試次數到達上限后則可以觸發。當不是 xhr 請求錯誤時，會把當前錯誤產生原因直接拋出，諸如 JSON 解析異常等；當產生 xhr 請求錯誤時，參數 err 為一個包含 code、message、isRequestError 三個屬性的 object
complete: 接收上傳完成后的后端返回信息，具體返回結構取決于后端sdk的配置

與自家服務端和ali-oss不同的是，qiniu-js提供了除成功和失敗額外的next事件，可以實時監測到上傳的進度，用戶感知上傳進度是起碼的用戶體驗。

除自家上傳服務通過原有的cookie做驗證以外，ali-oss和qiniu-js都需要token，而且出于安全的考慮，這個token必須從服務端獲取，一般來說都有nodejs，java，go，python等等語言的服務端實現

上傳的文件類型都支持Blob對象

ali-oss支持多類型，多平臺，從文件類型方面來講是個不錯的選擇

qiniu-js的上傳提供了進度的next事件，別具一格

從功能復雜性來說和文檔友好度來說，ali-oss更勝一籌

拋開大公司自己有上傳服務，小公司單純從上傳方面做技術選型的話，個人建議使用ali-oss

前后端分離的模式下，一個完整功能的實現，前端往往會強依賴后端，注意是強依賴

個人認為前后端分離的分離，最好是僅僅從項目架構上做分離，而不是將組織架構做前后端的分離

想使得自己獲得更大成長空間的程序員，盡量不要限定自己是前端，后端，從全棧的角度去提升自己，沒有機會就創造機會，沒有時間就擠出時間

若是身處前后端協作的團隊，享受前后端組織架構分工帶來的利好，但也不能因此麻木，盡可能多的走出知識舒適區，不要害怕浪費時間，不要害怕工作中用不到，學習另一端會反哺你對當前端的理解