1. Install egg-oss
npm install egg-oss --save
Two, configure oss
1. Open the oss plugin
// config/plugin.js
exports.oss = {
enable: true,
package: 'egg-oss',
};
2. Fill in the oss bucket information
// config/config.default.js
config.oss = {
client: {
bucket: 'your bucket name',
region: 'your bucket region(e.g. oss-cn-shenzhen)',
accessKeyId: 'your access key',
accessKeySecret: 'your access secret',
secure: true,
},
};
3. Because Egg enables CSRF protection by default, if you do not want to configure CSRF at present, you can disable it first
// config/config.default.js
config.security = {
csrf: {
enable: false,
},
};
3. Demonstration
1. Edit Controller
// app/controller/upload.js
'use strict';
const path = require('path');
const Controller = require('egg').Controller;
class UploadController extends Controller {
/**
* 上传头像
*/
async uploadAvatar() {
const {
ctx } = this;
let filePath;
const stream = await ctx.getFileStream();
if (stream.fields.filePath) {
filePath = stream.fields.filePath + '/' + path.basename(stream.filename);
} else {
filePath = path.basename(stream.filename);
}
const result = await ctx.oss.put(filePath, stream);
ctx.body = {
code: 0,
message: '上传成功',
data: {
url: result.url },
};
}
}
module.exports = UploadController;
2. Configure Router
// app/router.js
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const {
router, controller } = app;
router.post('/api/v1/uploadAvatar', controller.upload.uploadAvatar);
};
4. Demonstrate the effect through Vue + Element UI
1. Configure the API proxy to forward to the Egg service
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api/v1': {
target: 'http://localhost:7001' // Egg 服务地址
}
}
}
}
2. Use the Upload component in Element UI to demonstrate Demo
<template>
<el-upload
class="avatar-uploader"
action="api/v1/uploadAvatar"
:data="{ filePath: 'egg-oss-demo' }"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</template>
<script>
export default {
name: 'Home',
data () {
return {
imageUrl: ''
}
},
methods: {
handleAvatarSuccess (result) {
this.imageUrl = result.data.url
},
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('Avatar picture must be JPG format!')
}
if (!isLt2M) {
this.$message.error('Avatar picture size can not exceed 2MB!')
}
return isJPG && isLt2M
}
}
}
</script>
<style>
.avatar-uploader .el-upload {
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px dashed #d9d9d9;
border-radius: 6px;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
width: 178px;
height: 178px;
font-size: 28px;
line-height: 178px !important;
color: #8c939d;
text-align: center;
}
.avatar {
display: block;
width: 178px;
height: 178px;
}
</style>
3. Animation demonstration