Egg.js(三)ファイルアップロードアリクラウドOSS
13289 ワード
3年前にもアリクラウドOSSについて書いたことがありますが、当時使っていたExpress.Node.jsアリクラウドOSSファイルは今回使用したEggをアップロードします.jsは、実際の操作でもアリクラウドOSSのドキュメントと公式サイトの操作がいくつか変化していることが分かった.次の操作では、まず次のドキュメントを参照する必要があります:Egg.js-アップロードされたファイルオブジェクト記憶OSS>SDKリファレンス>Nodeを取得する.jsオブジェクトストレージOSS>開発ガイド>アクセスドメイン名(Endpoint)>アクセスドメイン名とデータセンターegg-multipart
フロントエンドテストコードの作成
バックエンドコード
ルートの登録
ここまでの過程は全部終わった.
WeChatウィジェットもご利用いただけます
上のバックエンドアップロードインタフェースは、微信ウィジェットでも正常に使用でき、親測が有効です.
config/config.default.jsファイルでfileモードを有効にします.const config = exports = {
//
// https://eggjs.org/zh-cn/basics/controller.html#
multipart: {
mode: 'file',
fileSize: '50mb', //
whitelist: [ //
'.png',
'.jpg'
],
}
}
config/config.default.jsでのドメイン間問題の解決config.cors = {
origin:'*',
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS'
};
フロントエンドテストコードの作成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="POST" action="http://localhost:7001/alioss/upload" enctype="multipart/form-data">
file: <input name="file" type="file" />
<button type="submit">Upload</button>
</form>
</body>
</html>
バックエンドコード
'use strict';
// https://help.aliyun.com/document_detail/32068.html
const Controller = require('egg').Controller;
const fs = require('mz/fs');
let OSS = require('ali-oss');
let aliInfo = {
// https://help.aliyun.com/document_detail/31837.html
region: 'oss-cn-shenzhen',
bucket: 'qxxxxxxxxx',
accessKeyId: 'LxxxxxxxxxxxxB',
accessKeySecret: 'Ixxxxxxxxxxxxxxxxi'
}
let client = new OSS(aliInfo);
class AliOssController extends Controller {
async upload() {
const { ctx } = this;
const file = ctx.request.files[0];
let result;
try {
// https://help.aliyun.com/document_detail/111265.html
// ，
result = await client.put(file.filename, file.filepath);
} finally {
//
await fs.unlink(file.filepath);
}
ctx.body = {
url: result.url,
//
requestBody: result,
};
}
}
module.exports = AliOssController;
ルートの登録
router.post('/alioss/upload', controller.alioss.upload);
ここまでの過程は全部終わった.
WeChatウィジェットもご利用いただけます
上のバックエンドアップロードインタフェースは、微信ウィジェットでも正常に使用でき、親測が有効です.
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res1) {
const tempFilePaths = res1.tempFilePaths[0]
// tempFilePath img src
wx.uploadFile({
url: 'http://localhost:7001/alioss/upload',
filePath: tempFilePaths,
name: 'file',
success (res) {
},
fail (res) {
}
})
}
})