效果图 

一、上传文件

 

 

二、删除文件

第一步，引入依赖

npm install ali-oss --save 

第二步，写OSS配置文件（server/oss.js） 

这里需要在阿里云开通子账号，赋予相应OSS权限，并记录相应的Id和Secret，用于操作 bucket，这里不细说了，建议自行百度。

// 阿里云oss存储
const OSS = require('ali-oss')

const client = new OSS({
  // region填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'oss-cn-hangzhou',
  // 阿里云账号RAM用户进行API访问或日常运维。
  accessKeyId: '你自己的accessKeyId',
  accessKeySecret: '你自己的accessKeySecret',
  bucket: '你自己的bucket'
})

export {client}

第三步，写一个上传的组件（components/uploadimage.vue）

这里引用了element ui组件样式，实现了选择图片后先先预览加载，等点击确定按钮后，再上传图片到阿里云OSS。 

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="url"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="upldchange">
      <!--预处理图片-->
      <img v-if="imageUrl" :src="imageUrl"  class="avatar">
      <!--添加icon-->
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageUrl: '', // 预览图片地址
      files: [], // 复刻文件数据
      url: '' // 因为auto-upload元素，action设置为空
    }
  },
  methods: {
    // 上传框状态改变监听事件
    upldchange (file) {
      // 文件格式大小判断处理
      const isJPG = file.raw.type === 'image/jpeg' | file.raw.type === 'image/png'
      const isLt2M = file.raw.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return
      }

      // 格式无误后，预览文件处理
      this.imgSaveToUrl(file)
      // 复刻文件信息
      this.files = file.raw
      console.log(this.files)
    },
    // 获取选中图片的预览路径，并赋值给本地img路径，在前端展示
    imgSaveToUrl (file) {
      // 获取上传图片的本地URL，用于上传前的本地预览，转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.imageUrl = URL.createObjectURL(file.raw)
      console.log('图片预览地址：', this.imageUrl)
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
</style>

第四步，实现上传图片

主要是依靠OSS对象的put(url,file)方法，前面是存储到bucket的路径及名称，后者是该文件的file类型数据。 

<template>
  <div>
    <uploadoss ref="refuploadoss" />
    <el-button type="primary" @click="uploadbtn">确定</el-button>
  </div>
</template>

<script>
import uploadoss from '../components/uploadimage.vue'
import moment from 'moment'
import {client} from '../../server/oss'
export default {
  name: 'test3',
  components: {
    uploadoss
  },
  methods: {
    uploadbtn () {
      if (this.$refs.refuploadoss.files.length !== 0) {
        this.ossput(this.$refs.refuploadoss.files)
      } else {
        this.$message.error('请选择图片')
      }
    },
    async ossput (file) {
      // 获取文件后缀名，如'.jpg'
      let index = file.name.lastIndexOf('.')
      let type = file.name.substr(index)

      // 随机生成16进制
      let fileName = Math.random().toString(16).slice(2)
      // 拼接新文件名（随机数+文件后缀名）
      let fileNames = `${fileName}${type}`

      let month = moment(Date.now()).format('YYYY-MM')

      // 上传文件,这里是上传到OSS的 upload文件夹下
      client.put('upload/' + month + '/' + fileNames, file).then(res => {
        if (res.res.statusCode === 200) {
          this.$message.success('上传成功！')
        } else {
          this.$message.error('上传失败！')
        }
      })
    }

  }
}
</script>

第五步，实现删除图片

依靠OSS的delete(url)方法，删除文件，url示例： upload/2023-02/b35aae063be1e198207bc8dc778.jpg。

<template>
    <div>
      <el-input type="text" v-model="url" placeholder="例:upload/2023-02/b35aae063be1e198207bc8dc778.jpg" style="width: 400px;"></el-input>
      <el-button type="primary" @click="deletebtn">删除</el-button>
    </div>
</template>

<script>

import {client} from '../../server/oss'
export default {
  name: 'test',
  data () {
    return {
      url: ''
    }
  },
  methods: {
    deletebtn () {
      if (this.url !== '') {
        this.deleteObject()
      }
    },
    async deleteObject () {
      try {
        // 填写Object完整路径。Object完整路径中不能包含Bucket名称，例:upload/2023-02/b35aae063be1e198207bc8dc778.jpg
        await client.delete(this.url)
        this.$message.success('删除成功')
        this.url = ''
      } catch (error) {
        console.log(error)
        this.$message.error('删除失败')
      }
    }
  }
}
</script>