前言
上傳圖片是很常見的需求咽斧，方法也有很多。本次使用的是七牛云的對象存儲躬存，七牛云的oss做的還是比較出色的收厨。
七牛云的上傳大體分為兩種
- 向服務端請求七牛的文件上傳 token，然后將文件上傳至七牛（授權(quán)式上傳）
- 將文件直接上傳到服務端优构，再由服務端將文件傳輸至七牛
授權(quán)式上傳其實還分兩種诵叁，一種是調(diào)用 qiniu SDK，一種直接調(diào)用七牛的上傳接口
本文會把兩種方法都實現(xiàn)钦椭，實際開發(fā)根據(jù)情況選用
使用技術(shù)
formData + axios + koa + koa-body
授權(quán)式上傳
這種上傳方式拧额，后端只需要返回七牛的 token碑诉，由前端調(diào)用 SDK 或者 上傳接口
SDK上傳
七牛云的sdk可以通過script標簽引入
https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js
通過sctipt標簽引入該文件，會在全局生成名為
qiniu的對象-
通過npm安裝
npm install qiniu-js --saveimport * as qiniu from 'qiniu-js'
qiniu-sdk
主要api侥锦，qiniu.upload(file, key, token, putExtra, config)
- file：Blob對象
- key：文件名
- token：上傳驗證信息进栽，前端通過接口請求后端獲得
- config：上傳配置參數(shù)
- putExtra：額外配置參數(shù)
調(diào)用成功后返回一個observable對象，調(diào)用它的 subscribe 方法獲取到響應結(jié)果
observable.subscribe({
complete(res) {
// 上傳完成的響應信息恭垦，res 包含 hash快毛、key兩個屬性（默認）
},
next(res) {
// 接收上傳進度信息，res 包含loaded番挺、total唠帝、percent三個屬性，提供上傳進度信息玄柏。
},
error(err) {
// 上傳錯誤觸發(fā)襟衰，err 包含 code、message粪摘、isRequestError 三個屬性
}
});
前端代碼：發(fā)送請求使用 axios
<input type="file" id="upload" accept="image/*" />
const fileInput = document.getElementById('upload');
fileInput.addEventListener('change', async function(e) {
const file = e.target.files[0]; // Blob瀑晒，文件流對象
// 通過后端接口獲取七牛云的 token
const res = await axios.get('/qiniuToken');
const { token, key } = res.data;
const putExtra = {
fname: '', // 文件原文件名
params: {}, // 用來放置自定義變量
mimeType: null // 用來限制上傳文件類型，為 null 時表示不對文件類型限制徘意；eg: ["image/png", "image/jpeg"]
};
const config = {
useCdnDomain: true, // 開啟 cdn 加速域名
region: null, // 為 null 會自動解析上傳區(qū)域
};
// 調(diào)用 qiniu.upload 上傳圖片苔悦，生成 observable 實例
const observable = qiniu.upload(file, key, token, putExtra, config);
// 調(diào)用 observable 的 subscribe 方法，獲取響應結(jié)果
observable.subscribe({
complete(data) {
const { key } = data;
// 把返回的 key 與 域名拼接椎咧，就是圖片地址
const url = '配置的域名' + key;
},
next(res) {
// ...
},
error(err) {
// ...
}
});
});
API上傳
首先拿到 token玖详，然后調(diào)用上傳的 api ，不同的空間區(qū)域?qū)煌慕涌诘刂芬赝耍业目臻g是華南區(qū)域，接口地址：http://upload-z2.qiniu.com
const fileInput = document.getElementById('upload');
fileInput.addEventListener('change', async function(e) {
const file = e.target.files[0]; // Blob劳澄，文件流對象
// 通過后端接口獲取七牛云的 token
const res = await axios.get('/qiniuToken');
const { token, key } = res.data;
const formData = new FormData();
formData.append('token', token);
formData.append('key', key); // key：文件名地技，可以不傳，如果不傳七牛則會自動生成隨機文件名 hash
formData.append('file', file);
const response = await axios.post('http://upload-z2.qiniu.com', formData);
const url = '七牛云倉庫配置的域名' + response.key;
});
上面的兩種上傳方式秒拔，后端需要返回 token
后端代碼：后端實現(xiàn)使用 koa
因為只需要返回 token莫矗，所以相對簡單
const qiniu = require('qiniu')
router.get('/qiniuToken', async (ctx) => {
// accessKey，secretKey 在個人中心可以查看
const accessKey = 'your access key';
const secretKey = 'your secret key';
// 鑒權(quán)對象 mac
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const options = {
scope: 'your bucket' // 倉庫名
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const token = putPolicy.uploadToken(mac);
const key = +new Date() + Math.random().toString(16).slice(2); // key 只需要隨機不重復就可以
ctx.body = { status: 1, data: { token, key } };
});
后端直傳
前端只需要傳遞一個 file 文件流對象
fileInput.addEventListener('change', async function(e) {
const file = e.target.files[0]; // Blob砂缩，文件流對象
const formData = new FormData();
formData.append('file', formData); // file 是后端接受的字段
// axios 識別到參數(shù)為 formData 類型后作谚，會自動修改 Content-Type 為 multipart/form-data
const res = await axios.post('/qiniu', formData);
const { url } = res.data;
});
后端需要調(diào)用 qiniu-sdk
先下載 koa-body
npm i -S koa-body
const koaBody = require('koa-body');
const koaBodyOpts = {
multipart: true, // 默認不會接受 formData 參數(shù)，需要開啟
formLimit: '15mb' // 默認 56 kb庵芭，盡量設置大一些
};
// 在全局使用 koa-body
app.use(koaBody(koaBodyOpts));
// 在某個路由使用
router.post('/qiniu', koaBody(koaBodyOpts), async (ctx) => {
const { file } = ctx.request.body.files;
const ext = path.extname(file.name);
const fileName = +new Date() + ext;
const localFile = file.path;
try {
const res = await qiniuPut(fileName, localFile);
const url = qiniuOpts.url + res.key;
ctx.body = { status: 1, data: { url } };
} catch (e) {
console.log(e);
ctx.body = { status: 0, msg: '上傳失敗' };
}
});
// 獲取七牛云 token
const qiniuToken = () => {
const accessKey = 'your access key';
const secretKey = 'your secret key';
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const options = {
scope: 'your bucket'
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const uploadToken = putPolicy.uploadToken(mac);
return uploadToken;
};
// 七牛云文件上傳
const qiniuPut = (key, localFile) => {
const uploadToken = qiniuToken();
const config = new qiniu.conf.Config();
// 空間對應的機房
config.zone = qiniu.zone.Zone_z2;
const formUploader = new qiniu.form_up.FormUploader(config);
const putExtra = new qiniu.form_up.PutExtra();
return new Promise((resolve, reject) => {
formUploader.putFile(uploadToken, key, localFile, putExtra, (respErr, respBody, respInfo) => {
if (respErr) {
reject(respErr);
} else {
resolve(respBody);
}
});
});
}
七牛云的 api 還有很多妹懒，有興趣可以看看文檔
