单个图片上传页面, 上传后显示图片预览
阿里云 OSS 服务端签名后直传
我们都知道, 采用 JS 客户端直接签名, OSSAccessId 和 AccessKeySecret 暴露在前端页面, 可以被轻易获取, 存在严重安全隐患 这里提供了一种使用阿里云 OSS 服务器端签名后直传, 避免这种危险的方法由于阿里云 OSS 开发文档只提供了 Java,PHP,Python 和 Go 语言的例子, 本 Demo 在此提供一个以 Node.js 作为后端的例子, 供大家参考
请求逻辑:
客户端要上传图片时, 到应用服务器取上传的 policy 及签名 (signature)
应用服务器返回上传 policy 和 signature
客户端拿到了签名后, 直接上传到 OSS
目前支持
chrome, firefox 浏览器, 其他浏览器还未全面测试, 欢迎大家测试后在 Issues 里反馈
使用
配置 OSS
进入阿里云管理控制台 --> 对象存储 OSS
新建 Bucket
Bucket 属性 --> 跨域设置:
查看自己的 AccessKey
点击显示, 会弹出短信验证窗口, 验证后即可显示出你的 AccessKeySecret
后端配置文件
- backend/src/config/development/app.js
- module.exports = {
- port: 3602,
- oss: {
- OSSAccessKeyId: '这里填你阿里云的 Access Key ID',
- secret: '这里填你阿里云的 Access Key Secret',
- host: 'http://cqq.oss-cn-shenzhen.aliyuncs.com' // 改为你自己阿里云 OSS 的外网域名
- }
- }
如何运行这个 Demo?
后端: backend 目录
- npm install
- npm start
前端: webfront 目录
- npm install
- npm run dev
技术栈
- koa
- koa-router
- vue
- vue-router
- axios
欢迎 Start, 欢迎 Pull Requests
来源: https://juejin.im/post/5a95038e6fb9a0635865a325