1.组件 antd的 Upload组件 移步官网有详细介绍
render(){
...
const props = { //各个参数请移步官网
name: 'file',//name名称要和后端服务保持一致
multiple: true,
showUploadList: true,
action: '/api/plugin/wiki/uploading',// 接口url
onChange:this.uploadChange,
onRemove: this.onUploadRemove,
listType: 'picture',
beforeUpload: this.beforeUploadFile,
defaultFileList: [...this.state.fileList]
}
}
....
return(
....
<Button>
<Icon type="cloud-upload" /> 上传附件
</Button>
....
)
2.node controller.js
const AWS = require('aws-sdk');
const LIANJIA_AWS_CONFIG = {
region: 'cn-north-1',
s3BucketEndpoint: true,
s3ForcePathStyle: true,
endpoint: 'http://storage.xxx.com/'
}
const BUCKET_CONFIG = {
bucket: 'xxxxxx',//bucket值 需要申请名称 ,不能随意写
key: {
accessKeyId: 'xxxxx',
secretAccessKey: 'xxxxx'
}
}
const s3 = new AWS.S3(Object.assign({}, LIANJIA_AWS_CONFIG, BUCKET_CONFIG.key))
/**
*
* 附件上传
*
*/
async fileUploading(ctx){
try {
// file name:'file' 与前端的name保持一致
let files = ctx.request.body.files.file;
let path = files.path
const params = {
Bucket: BUCKET_CONFIG.bucket,
Key: `${(new Date()).getTime()}-${encodeURIComponent(files.name)}`,
Body: fs.createReadStream(path),
//去除前缀的下载链接的文件名
ContentDisposition: `attachment; filename=${encodeURIComponent(files.name)}`
};
let res = await s3.upload(params).promise() //异步upload 加promise()
let options = {
path: res.Location,
name: files.name
}
//此处为返回值根据使用的框架或插件自行修改
ctx.body = yapi.commons.resReturn(options);
} catch (e) {
//此处为返回值根据使用的框架或插件自行修改
ctx.body = yapi.commons.resReturn(null, 402, e.message);
}
}