el-upload 上传七牛云

image.png

<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"
    :limit="limit"
    class="avatar-uploader"
  >
    <el-icon>
      <Plus />
    </el-icon>
    <template #tip>
      <div class="el-upload__tip">
        {{ tip }}
      </div>
    </template>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted ,watch} from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage, ElUpload } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { getQnyToken } from "@/api/userCore/qny";
const props = defineProps({
  imgUrl: {
    type: String,
    default: "",

  },
  // 数量限制
  limit: {
    type: Number,
    default: 1,
  },
  tip: {
    type: String,
    default:
      "建议图片比例16:9；只能上传jpg/png格式图片；单张图不超过2MB；最多上传三张",
  },
});

//#region 侦听器
watch(() => props.imgUrl, (newValue, oldValue) => {
  if (newValue) {
    let imgList = newValue.split(",")
    fileList.value = imgList.map((item) => {
      return {
        name: "",
        url: item
      }
    })
  }
})
//#endregion

// 图片列表
const fileList: any = ref<UploadUserFile[]>([]);
// url列表
const picURL: any = ref([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const uploadData: any = ref({
  token: "", //七牛云token
  key: null,
});

const emit = defineEmits(["uploadSuccessEmits", "importTemplateEmits"]);
//页面初始化
onMounted(() => {
  getQnyToken().then((res) => {
    uploadData.value.token = res.data;
  });
});

// 删除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  console.log(fileList.value, 111);
  picURL.value = fileList.value.map((item: any) => {
    return {
      name: item.name,
      url: item.url,
    };
  });

  emit("uploadSuccessEmits", picURL.value);
};

// 放大
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
// 上传之前
const beforeAvatarUpload = (file: any) => {
  //判断图片大小
  const isLt2M = file.size / 1024 / 1024 < 2;
  const fileName = file.name;
  if (!isLt2M) {
    ElMessage.error("图片必须小于5MB!");
  }
  // //判断图片类型
  let types = ["image/jpg", "image/png"];
  const isImage = types.includes(file.type);
  if (!isImage) {
    ElMessage.error("只能上传jpg/png!");
  }
  //文件名称
  uploadData.value.key = fileName;
  return isLt2M && isImage;
};

// 上传成功
const handleAvatarSuccess = (res: any, file: any) => {
  picURL.value.push({
    name: uploadData.value.key,
    url: `${`https://qny.xxxxxxx.com/${uploadData.value.key}`}`,   //七牛云配置的域名地址
  });
  console.log(fileList.value, "图片列表");
  console.log(picURL.value, "url列表");
  emit("uploadSuccessEmits", picURL.value);
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>