Installation and use:

Install Ali-OSS using NPM

npm install ali-oss
Copy the code
let OSS = require('ali-oss');

let client = new OSS({
  accessKeyId: 'your access key'.// When you create a Bucket
  accessKeySecret: 'your access secret'.// When you create a Bucket
  bucket: 'your bucket name'.// The name of the Bucket you created
  region: 'oss-cn-hangzhou'   // OsS-CN-HANGZHOU is the default region for which you have purchased the OSS service
});
/ / upload
export async function put (filePath, file) {
  try {
    let result = await client.put(filePath, file)
    return result
  } catch (err) {
    console.log(err)
  }
}

/ / delete
export async function remove (filePath) {
  try {
    let result = await client.delete(filePath)
    return result
  } catch (err) {
    console.log(err)
  }
}
Copy the code

The code

<template>
  <div>
      <el-upload
        list-type="picture-card"
        action
        :http-request="upLoad"
        :on-remove="handleRemove"
        :auto-upload="true"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
  </div>
</template>

<script>
import { client, put, remove } from "@/utils/oss";
export default {
  data() {
    return {
      dialogImageUrl: "".dialogVisible: false.fileList: [].// Define an array in which all successful uploads are stored and deleted
    };
  },
  methods: {
    // Upload the contract image
    upLoad(item) {
      // item is the image currently uploaded locally
      // Name it randomly
      var fileName = item.file.name; // The name of the image currently uploaded locally (no date or time)
      var date = new Date(a);var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var mydate = date.getDate();
      mydate = mydate < 10 ? "0" + mydate : mydate;
      this.baseurl =
        "img/" + year + "/" + year + month + "/" + year + month + mydate + "/";
      // Upload a new image to the OSS. The purpose is to distinguish the name of the local image from that of the local image, so that the same name will not be deleted by mistake. At the same time, it is convenient to view the time point of the latest uploaded image on the OSS
      var filePath = this.baseurl + new Date().getTime() + "-" + fileName;

      var file = item.file; // This image is currently uploaded locally
      put(filePath, file).then((result) = > {
        // After the file is uploaded successfully, obtain the name of the file in the returned value and put it in the fileList array
        this.fileList.push(result.name);
      });
    },
    // Delete the contract image
    handleRemove(file) {
      // file Indicates the image that has been uploaded locally
      var fileName = file.name; // The name of the image that is currently uploaded locally (with time and date)
      var removeName = "";
      this.fileList.forEach(function (name) {
        // forEach finds the same file name in the oss and local fileList
        if (name.match(fileName)) {
          removeName = name; // Assign the name of the looping image that matches the filename, where the looping image is a time and date}}); remove(removeName).then((result) = > {
        // Pass in the looping image and delete it
        if(result.res.status ! ="204") {
          console.log("Delete failed"); }}); ,}}};</script>
Copy the code