Original text: github.com/sikichan/os…

Upload a single image page, upload the image preview

Ali cloud OSS server after signing direct transmission

As we all know, using JS client direct signature, OSSAccessId and AccessKeySecret exposed in the front page, can be easily obtained, there are serious security risks. Here provides a way to use Ali cloud OSS server side signature after direct transmission, to avoid this danger. Because ali cloud OSS development documentation only provides Java, PHP, Python and Go language examples, this Demo provides a node.js backend example for your reference.

Request logic:

  1. When the client wants to upload pictures, obtain the uploaded policy and signature from the application server.
  2. The application server returns to upload policy and signature
  3. The client gets the signature and uplots it directly to OSS

Currently supported

Chrome, Firefox, and other browsers have not been fully tested, please feedback in Issues after testing.

use

Configure the OSS

  1. Choose Ali Cloud Management Console > Object storage OSS
  2. A new Bucket
  3. Bucket properties –> Cross domain Settings:

View your AccessKey

Back-end configuration files

backend/src/config/development/app.js

module.exports = {
  port: 3602,
  oss: {
    OSSAccessKeyId: '[here to fill your Aliyun Access Key ID]',
    secret: '[insert your Access Key Secret here]',
    host: 'http://cqq.oss-cn-shenzhen.aliyuncs.com'// Change your own ali cloud OSS extranet domain name}}Copy the code

How do I run the Demo?

  • Backend: Backend directory
npm install
npm start
Copy the code
  • Front end: WebFront directory
npm install
npm run dev
Copy the code

Technology stack

  • koa
  • koa-router
  • vue
  • vue-router
  • axios

Welcome Start and Pull Requests