vue3使用七牛云实现el-upload上传图片功能

1.前端请求后端，获取上传七牛云的token

2.将后端返回的token放入提交的表单中

3.设置el-upload中的上传地址，即action（七牛云对应的服务器地址） action=“http(s)😕/up-z2.qiniup.com”

4.选择图片，进行自动上传–>：auto-upload=‘true’

5.上传成功的处理，拼接可访问图片的路径，自己的域名(30天有效)+ res.key

<template>
  <el-upload v-model:file-list="fileList" action="http://upload-z2.qiniup.com" list-type="picture-card"
    :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="true"
    :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :data="uploadData">
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElUpload } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import store from '@/store'

// 图片列表
const fileList: any = ref<UploadUserFile[]>([
  // {
  //   name: 'food.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  // },
])
// url列表
const picURL:any = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const uploadData: any = ref({
  token: store.getters.uploadToken,
  // token: '4_aYuuFk0q5GAyaqtBNzSV-UvNG2knaHD88zr2cf:aS203tsgXrGNADSNTcLcRHOecTc=:eyJzY29wZSI6ImVjb20iLCJkZWFkbGluZSI6MTY3ODc2NTU2MX0=',
  key: null
})

// 删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  console.log(fileList.value, 111);
}

// 放大
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
// 上传之前
const beforeAvatarUpload = (file: any) => {
  const isLt2M = file.size / 1024 / 1024 < 5;
  const fileName = file.name;

  // if (!isJPG) {
  //   ElMessage.error('头像必须是JPG格式!')
  // }
  if (!isLt2M) {
    ElMessage.error('病例图片必须小于5MB!')
  }
  uploadData.value.key = fileName;
  // return isJPG && isLt2M
  return isLt2M
}

// 上传成功
const handleAvatarSuccess = (res: any, file: any) => {
  picURL.value.push({
    name: uploadData.value.key,
    url: `${`http://qiniu.ecom20200909.com/${uploadData.value.key}`}`
  });
  console.log(fileList.value, '图片列表');
  console.log(picURL.value, 'url列表');
}
</script>