What is OSS?

First, take a look at the instructions on the official website. I’m the link to the official documentation

Ali Cloud Object Storage Service (OSS) is a massive, secure, low-cost and highly reliable cloud Storage Service provided by Ali Cloud. Its data design durability is not less than 99.999999999%, service design availability is not less than 99.99%. OSS has platform-independent RESTful apis that allow you to store and access any type of data in any application, anytime, anywhere.

You can easily move massive data into or out of Ali Cloud OSS by using the APIS, SDK interfaces or OSS migration tools provided by Ali Cloud. After data is stored in Ali Cloud OSS, you can choose Ali Cloud OSS service of Standard type as the main storage mode for mobile applications, large websites, picture sharing or hot audio and video. Ali Cloud OSS services of frequent Access and Archive types with lower cost and longer storage life can also be used to back up and Archive data that is not frequently accessed.

It is a large Object

{
    parent
    {
        children
    }
}
Copy the code

How to use it?

The official website provides SDK samples in several languages, but I’m using the Node version here.

  1. Install Ali-OSS using NPM

    Node.js >= 8.0.0 If you want to use it in node.js < 8 environment, use ali-oss 4.x version.

npm install ali-oss
Copy the code
  1. The OSS NodeJS SDK supports both synchronous and asynchronous usage
  • Synchronous mode: Synchronous asynchronous programming based on async and await mode
  • Asynchronous: Similar to callback, the API returns a Promise, uses.then() to return a result, and uses.catch() to handle an error

ali-oss.js

Ali / / in osslet OSS = require('ali-oss') /** * [accessKeyId] {String} : AccessKey created by Ali Cloud console. * [accessKeySecret] {String} : Create AccessSecret through Ali Cloud console. * [bucket] {String} : Bucket created through the console or PutBucket. * [region] {String} : indicates the region where the bucket resides. The default region is OSS-CN-Hangzhou. * /let client = new OSS({
   region: '<oss region>'// The cloud account AccessKey has all API access rights. It is recommended to follow ali Cloud security best practices and use RAM sub-account or STS on the server and STS on the client. accessKeyId:'<Your accessKeyId>',
  accessKeySecret: '<Your accessKeySecret>',
  bucket: '<Your bucket name>'
})

Copy the code
  1. Call API methods

ali-oss.js

* @param {string} ObjName STORAGE path and file name of OSS * @param {string} fileUrl Local file ** @retruns Promise */export const put = async (ObjName, fileUrl) => {
  try {
    let result = await client.put(`AAA/${ObjName}* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *return result
  } catch (e) {
    console.log(e)
  }
}
Copy the code

Here is a sample method from the official website

Use the Upload component of Element-UI to encapsulate the Upload

The Upload component of element-UI has an HTTP-Request configuration that allows you to customize the Upload method, overriding the default.

Paste code directly

<template>
  <div class="hello">
    <el-upload
      class="upload-demo"
      action
      :http-request="handleUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-remove="beforeRemove"
      multiple
      :limit="limit"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :list-type="listType"
    >
      <el-button size="small" type="primary"<div slot= </el-button"tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>
  </div>
</template>

<script>
import { put, getFileNameUUID } from '@/utils/ali-oss'

export default {
  name: 'Upload',
  props: {
    tip: {
      type: String,
      default: 'Upload size cannot exceed 80M'
    },
    limit: {
      type: Number,
      default: 1
    },
    action: {
      type: String,
      default: ' '
    },
    headers: {
      type: Object,
      default: () => {}
    },
    name: {
      type: String,
      default: ' '
    },
    listType: {
      type: String,
      default: 'text'}},data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.$emit('on-remove', file, fileList)
    },
    handlePreview(file) {
      this.$emit('on-preview', file)
    },
    handleExceed(files, fileList) {
      this.$message. Warning (' Uploads only at a time${this.limit}}, beforeRemove(file, fileList) {return this.$confirm(' Confirm removal${file.name}? `) }, handleSuccess(response, file, fileList) { this.fileList = fileList this.$emit('on-success', file, fileList)}, /** * custom upload method */ handleUpload(option) {// Generated file nameletObjName = getFileNameUUID() // Call the method put(' aaaaaa 'in ali-oss${objName}`, option.file).then(res => { console.log(res) }) } } } </script> <! -- Add"scoped" attribute to limit CSS to this component only -->
<style scoped></style>

Copy the code

Submit to background save file address

After uploading to Ali Cloud OSS successfully, it will return the address of the file and submit it to the background to save the address.

UUID generation algorithm has a variety of, here I use the paste out, for reference only


/** * Generates random file names * regular eight random characters, with an underscore attached to the timestamp */
export const getFileNameUUID = (a)= > {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)}return `The ${+new Date()}_${rx()}${rx()}`
}
Copy the code