Fusion Upload組件 對接 阿里雲OSS/七牛/又拍

BeforeUpload 方法

Upload組件的BeforeUpload方法,是一個十分強大的方法，能夠在上傳請求發起以前作一系列的操做行爲。從而達到改變請求參數的目的。

beforeUpload 的 Function Signature (實在不知道怎麼翻譯了) 爲 Function(file: Object, options: Object) => Boolean/Object/Promise。 說明這個方法接收兩個參數

1. file，即將上傳的原生File對象
2. options，上傳的各個參數, 包括

{
    action: "http://xxxxx.xxxx"
    data: {}
    headers: {}
    method: "post"
    name: "file"
    timeout: undefined
    withCredentials: true
}
複製代碼

返回值也支持多種(Boolean/Object/Promise):

返回值	行爲
false	阻止上傳
true	繼續上傳
Object 結構同入參 options	繼續上傳而且把 返回值 merge到 上傳參數中
Promise.reject()	阻斷上傳
Promise.resolve(false)	阻斷上傳
Promise.resolve(true)	繼續上傳
Promise.resolve(data) 結構同入參 options	繼續上傳而且把 Promise返回值 merge到上傳參數中

看起來挺複雜,可是其實內在邏輯就是一個: 返回false就阻止上傳, 返回Object都merge上傳參數,其餘返回值直接繼續上傳。返回既能夠是直接return,也能夠是經過Promise返回值。

有了beforeUpload的能力,就能夠用來作不少事情了。

formatter方法

Upload對返回值是有要求的。 只有HTTP狀態碼爲2xx,且返回體爲

{
     "success": true, //必需
      "message": "上傳成功",  // (非必須)
      "url": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"             // 返回結果
      "imgURL": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",         // 圖片預覽地址 (非必須)
      "downloadURL": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",    // 文件下載地址 (非必須)
}
複製代碼

則表明成功。

因爲各大雲廠商,對於成功請求成功的定義是不同的。因此須要用到Upload組件Upload組件的formatter方法。formatter接收原始的 response,用戶自行把原始response轉化爲Uplaod要求的標準response並返回便可。

阿里雲OSS

OSS 是阿里雲提供的文件存儲服務, 在集團內也是十分經常使用的一個存儲服務。 目前阿里雲推薦的方式是,Web端簽名直傳OSS。

首先看看文檔樣例，對接OSS主要分爲三個步驟:

1. 獲取文件信息
2. 請求上傳參數
3. 上傳文件

這樣就又要用到beforeUpload方法了,三個步驟均可以在beforeUpload中完成。假設咱們的後端實現和官方Demo一致。官方樣例的上傳參數返回是這樣的:

{
    "accessid": "xxxxxxx",
    "host": "http://post-test.oss-cn-hangzhou.aliyuncs.com",
    "policy": "xxxxxxxxxxxxxxxx",
    "signature": "xxxxxxxxxxxxx",
    "expire": 1546944707,
    "dir": "xxx/xxxx/xx/xx"
}
複製代碼

前端經過ajaxGetOSSToken函數上面這個數據,那麼beforeUpload就能夠這樣寫:

function beforeUpload(file, uploadOptions) {
    // file 原生的File對象,即將被上傳的文件
    // uploadOptions 是 上傳參數
    let promise = ajaxGetOSSToken(); // 函數自行實現,保證返回一個promise來就能夠
    promise = promise.then((data) => {
    	uploadOptions.data = {
    		name: file.filename,
			key: `${data.dir}${file.name}`,
			policy: data.policy,
			OSSAccessKeyId: data.accessid,
			success_action_status: 200
			signature: data.signature
    	};
    	uploadOptions.headers = {'X-Requested-With': null};// 須要跨域上傳的話加這一段
    	uploadOptions.action = data.host;
    	return uploadOptions;
    });

    return promise;
}
複製代碼

<Upload
        action="" // 先不填 有服務端返回
        beforeUpload={beforeUpload}
        onChange={onChange}
        onSuccess={onSuccess}
        withCredentials={false} // 這個很重要
    >
        <Button>Upload File</Button>
    </Upload>
複製代碼

能夠上傳文件到OSS的Upload組件就完成了。

七牛雲存儲

七牛提供了Form上傳接口與後端生成Token的Java SDK NodeJS SDK。 假設後端返回的數據是這樣的:

{
    "token": "xxxxxxx",
    "key": "xxx/yyyy/zzz/aaa.jpg",
    "host": "http://upload.qiniup.com/"
}
複製代碼

前端經過ajaxGetOSSToken函數上面這個數據,那麼beforeUpload就能夠這樣寫:

function beforeUpload(file, uploadOptions) {
    // file 原生的File對象,即將被上傳的文件
    // uploadOptions 是 上傳參數
    
    let promise = ajaxGetOSSToken(); // 函數自行實現,保證返回一個promise來就能夠
    promise = promise.then((data) => {
    	uploadOptions.data = {
    		token: data.token,
			key: data.key,
    	};
    	uploadOptions.headers = {'X-Requested-With': null};// 須要跨域上傳的話加這一段
    	uploadOptions.action = data.host;
    	return uploadOptions;
    });
    
    return promise;
}
複製代碼

<Upload
        action="" // 先不填 有服務端返回
        beforeUpload={beforeUpload}
        onChange={onChange}
        onSuccess={onSuccess}
        withCredentials={false} // 這個很重要
    >
        <Button>Upload File</Button>
    </Upload>
複製代碼

能夠上傳文件到七牛的Upload組件就完成了。

又拍雲

又拍雲提供Form API，支持大文件和小文件上傳，本處以小文件上傳爲例。也給後端生成Token的各類語言的SDK。 假設後端返回的數據是這樣的:

{
    saveKey: "xxxxx",
    policy: "xxxxxx==",
    authorization: "xxxxxxxx",
    bucket: "xxxx",
}
複製代碼

前端經過ajaxGetOSSToken函數上面這個數據,那麼beforeUpload就能夠這樣寫:

function beforeUpload(file, uploadOptions) {
    // file 原生的File對象,即將被上傳的文件
    // uploadOptions 是 上傳參數
    
    let promise = ajaxGetOSSToken(); // 函數自行實現,保證返回一個promise來就能夠
    promise = promise.then((data) => {
    	uploadOptions.data = {
    		'save-key': data.saveKey,
			policy: data.policy,
			authorization: data.authorization,
        expiration: 30,
    	};
    	uploadOptions.headers = {'X-Requested-With': null};// 須要跨域上傳的話加這一段
    	uploadOptions.action = " http://v0.api.upyun.com/" + data.bucket;
    	return uploadOptions;
    });
    return promise;
}
複製代碼

<Upload
        action="" // 先不填 有服務端返回
        beforeUpload={beforeUpload}
        onChange={onChange}
        onSuccess={onSuccess}
        withCredentials={false} // 這個很重要
    >
        <Button>Upload File</Button>
    </Upload>
複製代碼

能夠上傳文件到又拍雲的Upload組件就完成了。