采用架构vue3+element  plus

引入的依赖  ali-oss

1、安装依赖

npm install ali-oss

2、引入

<template>
  <div class="p">
    <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        style="display: flex;flex-direction:column;"
    >
      <div class="ps" style="display: flex;flex-direction: column;">
        <div class="ims" style="display: flex;flex-direction: row;flex-wrap: wrap;">
          <img :src="imageUrl" style="display: block;width: 120px;height: 120px;margin: 10px;" v-if="imageUrl"/>
        </div>
        <label>上传</label>
      </div>
    </el-upload>
  </div>
</template>
<script setup>
import OSS from "ali-oss"
import {ref,onMounted} from 'vue'
// import { ElMessage } from 'element-plus'
let imageUrl = ref('')

const handleAvatarSuccess = (response, uploadFile) => {
  console.log(response,'====response1')
  console.log(uploadFile,'====uploadFile2')

  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
const client = ref(null)
const beforeAvatarUpload = (file) => {
  console.log(file,'-----eeee')
  //文件名
  let filename = '/qrcode/'+new Date().getTime()+file.name.substring(file.name.lastIndexOf('.'))
  // 生成文件的签名URL。
  const url = client.value.signatureUrl(filename, {
    method: "PUT",
    "Content-Type": "application/x-www-form-urlencoded",
  });
  try {
    const result = client.value.put(`${filename}`,file).then(ws=>{
      console.log(ws.url,'========rs')
      imageUrl.value = ws.url
      return true
    })
  }catch (err){
    console.log(err,'=========================')
  }
  return false
}

//删除
// const handleRemove = (filepath)=>{
//   try {
//      let rs = client.value.delete(filepath)
//     return rs
//   }catch (err){
//     console.log(err,'===删除===')
//   }
// }

onMounted(async ()=>{
  client.value = new OSS({
    region: 'oss-cn-beijing',
        accessKeyId: 'XXXXXXX',
    accessKeySecret: 'XXXXXX',
    // 填写Bucket名称。
    bucket: 'XXXX'
    //stsToken:''
  })
})
</script>
<style scoped>
</style>