preface

These two days with Vue do background management system, to store large files to the cloud server, their own server storage cloud server returned address. So how does this work? Come and see how to do it

First, why to store large files in the cloud server?

  • Cloud servers are much more powerful than their own servers in computing capacity, storage space and other aspects
  • The size of the image is much larger than the URL string
  • Reduce the stress on your server
  • After registering with the cloud server, you can get free storage space at a low cost

How to apply for a cloud server?

Take Tencent Cloud as an example. Tencent cloud official website

1. Set up an account

  • You can use wechat to scan the code and then click to register
  • Fill in personal Information
  • Real name authentication (face brushing)

2. Apply for object storage

After successful registration, search on Tencent cloud home pageObject storage Then click use now, and it will remind you that it is not openCos serviceAfter agreeing to the agreement, the service will be opened.Then click Create bucket to select your location.

3. Enable cross-domain access to CORS

Click the bucket nameClick cross domain Access CORS Settings in Security Management.Click Add Rule, test phase, first make all domain names accessible.

4. Access key

To upload files to the cloud server through code, you need an access key.After the search is complete, follow the prompts and save the key.Tencent Cloud Document:Object storage

How to use code to upload files to the cloud server?

1. Download third-party packages

To use cos-js-SDK-V5, you can use NPM install cos-js-sdK-v5-s to download it into the Vue project.

2. Instantiate the COS object

This is where you need the key, so just copy it.

The code is as follows (example) :

// The following code is fixed
const COS = require('cos-js-sdk-v5')
// Fill in key and ID (key) in Tencent Cloud COS
const cos = new COS({
 SecretId: 'xxx'.// Identity ID
 SecretKey: 'xxx' // Identity key
})
Copy the code

3. Upload using THE API provided by COS

This API requires basic information about object storage. You can use the following figure.

The code is as follows (example) :

Write an upload method in the Methods section of the Vue project and use the putObject provided by COS to complete the upload action.

cos.putObject({
     Bucket: 'xxxxxx'./* Buckets */
     Region: 'xxxx'./* Specifies the location of the bucket. */ is a mandatory field
     Key: res.file.name, /* File name */
     StorageClass: 'STANDARD'.// Upload mode, standard mode
     Body: res.file // Upload the file object
   }, (err, data) = > {
     console.log(err || data)
     // Upload successfully
     if (data.statusCode === 200) {
     // Store the address returned by the server after successful upload
       const url = `https://${data.Location}`
       console.log('The cloud server returned the address:' + url)
     }
   })
Copy the code

conclusion

Other cloud servers use roughly similar, feel useful if you can collect down oh ~