上传视频和图片

最新推荐文章于 2024-07-26 11:41:15 发布

weixin_49773410

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量270

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_49773410/article/details/139829360

版权

<template>
  <a-modal
    v-if="videoSrc"
    :open="videoVisible"
    :title="videoTitle"
    :footer="null"
    @cancel="handleVideoCancel"
  >
    <video
      width="100%"
      height="300px"
      controls
      ref="myvideo"
      :src="videoSrc"
    ></video>
  </a-modal>
  <a-modal
    v-if="previewImage"
    :open="previewVisible"
    :title="previewTitle"
    :footer="null"
    @cancel="handleCancel"
  >
    <img alt="example" style="width: 100%" :src="previewImage" />
  </a-modal>
  <a-upload
    v-if="isShow === 2"
    v-model:file-list="fileList"
    :multiple="true"
    name="file"
    action="/simon-ai/web/file/upload/file"
    :headers="{
      token: memberStore.token,
    }"
    :before-upload="beforeUpload"
    list-type="picture"
    :previewFile="previewFile"
    @preview="handlePreview"
    @change="handleChange"
  >
    <a-button type="primary">点击上传</a-button>
  </a-upload>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import type { UploadProps } from "ant-design-vue";
import { message } from "ant-design-vue";
import useMemberStore from "@/stores/member";
const memberStore = useMemberStore();
defineProps({
  isShow: Number,
});
const fileList = ref<UploadProps["fileList"]>([]);
const videoSrc = ref();
const myvideo = ref();
function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
const beforeUpload = (file: any) => {
  // MP4, MOV, AVI, FLV, MKV, JPG, JPEG, PNG, MPEG4
  const isJpgOrPng =
    file.type === "image/jpeg" ||
    file.type === "image/png" ||
    file.type === "image/jpg" ||
    file.type === "video/mp4" ||
    file.type === "video/mov" ||
    file.type === "video/avi" ||
    file.type === "video/flv" ||
    file.type === "video/mkv" ||
    file.type === "video/mpeg4";
  if (!isJpgOrPng) {
    message.error("上传文件的格式不正确");
  }
  const isLt200M = file.size / 1024 / 1024 < 200;
  if (!isLt200M) {
    message.error("文件大小不能超过200M");
  }
  return isLt200M && isJpgOrPng;
};

// 图片.视频预览
const previewVisible = ref(false);
const previewImage = ref("");
const previewTitle = ref("");
// 视频
const videoVisible = ref(false);
const videoTitle = ref("");
const handleCancel = () => {
  previewVisible.value = false;
  previewTitle.value = "";
};
const handleVideoCancel = () => {
  videoVisible.value = false;
  videoTitle.value = "";
};
watchEffect(() => {
  if (videoVisible.value === false) {
    myvideo.value?.pause();
  }
});
const handlePreview = async (file: any) => {
  if (!file.url && !file.preview) {
    file.preview = (await getBase64(file.originFileObj)) as string;
  }
  if (
    file.type === "image/jpeg" ||
    file.type === "image/png" ||
    file.type === "image/jpg"
  ) {
    previewVisible.value = true;
    previewTitle.value =
      file.name || file.url.substring(file.url.lastIndexOf("/") + 1);
    previewImage.value = file.url || file.preview;
  }
  if (
    file.type === "video/mp4" ||
    file.type === "video/mov" ||
    file.type === "video/avi" ||
    file.type === "video/flv" ||
    file.type === "video/mkv" ||
    file.type === "video/mpeg4"
  ) {
    const current = file.originFileObj;
    const fileReader = new FileReader();
    fileReader.readAsDataURL(current);
    fileReader.onload = function (e) {
      videoSrc.value = e.target?.result;
      videoVisible.value = true;
      videoTitle.value =
        file.name || file.url!.substring(file.url!.lastIndexOf("/") + 1);
    };
  }
};

// 预览
const handleChange = async (info: any) => {
  if (info.file.status !== "uploading") {
  }
  if (info.file.status === "done") {
    message.success(`${info.file.name} 文件上传成功`);
    console.log(info.file);
  } else if (info.file.status === "error") {
    message.error(`${info.file.name} 文件上传失败.`);
  }
};
defineExpose({
  fileList,
});
const  previewFile = (file: any) => {
  if (file.type === "video/mp4") {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = (error) => reject(error);
    });
  } else {
    return new Promise(async (resolve) => {
      const img = await getBase64(file);
      resolve(img);
    });
  }
};
</script>

<style scoped></style>