上传图片.

<template>
  <div>
    首页
    <el-upload action="#" list-type="picture-card" :file-list="fileList" :multiple="true" :on-preview="imgPreview"
      :on-remove="imgRemove" :http-request="upload">
      <!-- <el-upload action="#" list-type="picture-card" :file-list="fileList" :limit="1" :class="{ disabled: imgclass }"
      :multiple="true" :on-preview="imgPreview" :on-remove="imgRemove" :http-request="upload"> -->
      <el-icon>
        <Plus />
      </el-icon>
    </el-upload>
    <el-dialog title="图片预览" v-model="showDialog">
      <img width="100%" :src="imgUrl" alt="">
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import COS from 'cos-js-sdk-v5'
// 控制显示弹层
const showDialog = ref(false)
const fileList = ref([])
const imgUrl = ref('')
const imgclass = ref(false)
const cos = new COS({
  SecretId: 'AKI',
  SecretKey: 'CE6'
})
// 点击放大镜查看图片
const imgPreview = (file) => {
  imgUrl.value = file.url
  showDialog.value = true
}
// 删除图片
const imgRemove = (uploadFile, uploadFiles) => {
  imgclass.value = fileList.value.length >= 1
  fileList.value = uploadFiles
}
const upload = (params) => {
  console.log(params.file)
  // 进行上传操作
  if (params.file) {
    cos.putObject({
      Bucket: 'shooping-1316047121', // 存储桶的名字
      Region: 'ap-beijing', // 存储桶地域
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Key: params.file.name, // 上传到存储桶的文件名, 如果希望不重名, 可以对文件名进行处理
      Body: params.file // 上传文件对象
    }, (err, data) => {
      if (err) {
        return err
      } else {
        imgclass.value = true
        fileList.value.push({
          uid: params.file.uid,
          name: params.file.name,
          size: params.file.size,
          type: params.file.type,
          url: 'http://' + data.Location
        })
      }
    })
  }
}
</script>
<style scoped lang='less'>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>