带截图的图片上传组件

适用于vue3+ts+ant-design-vue开发的项目

1.组件文件

2.接口文件

//上传图片 给ant-design-vue的上传组件提供的地址
export const UploadApi =
  process.env.UPLOAD +
  request.AxiosLink.UPLOAD_IMG_API +
  "/sysUserUrl/upload/scenic";

//上传图片 给ant-design-vue的上传组件提供的地址 不同的图片上传到相对应的地址
export const UploadApiNews =
  process.env.UPLOAD +
  request.AxiosLink.UPLOAD_IMG_API +
  "/sysUserUrl/upload/news";


//上传图片 手动上传时使用
export const uploadScenicSpot = (params: any, type: any) => {
  let file = "scenicSpot";
  if (type == 2) {
    file = "news";
  }
  return axios
    .post(
      `${request.AxiosLink.UPLOAD_IMG_API}/sysUserUrl/upload/` + file,
      params
    )
    .then((res) => res);
};

3.数据处理方法文件

import { ref } from "vue";
import DICLIST from "@/utils/dictionary-config.js"; // 状态字典文件，该组件中是用不到

export const publicMethods = () => {
  const 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);
    });
  };

  // base 64 转成二进制文件流
  const dataURLtoFile = (urlData: any) => {
    if (typeof urlData != "string") {
      return;
    }
    var arr: any = urlData.split(",");
    var type = arr[0].match(/:(.*?);/)[1];
    var fileExt = type.split("/")[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], "filename." + fileExt, {
      type: type
    });
  };

  // const getBase64Image = (img: any) => {
  //   var canvas = document.createElement("canvas");
  //   canvas.width = img.width;
  //   canvas.height = img.height;
  //   let ctx: any = canvas.getContext("2d");
  //   ctx.drawImage(img, 0, 0, img.width, img.height);
  //   var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
  //   var dataURL = canvas.toDataURL("image/" + ext);
  //   return dataURL;
  // };
  const getBase64Image = (Img: any) => {
    let dataURL = "";
    const canvas = document.createElement("canvas");
    const { width } = Img;
    const { height } = Img;
    canvas.width = width;
    canvas.height = height;
    canvas.getContext("2d")!.drawImage(Img, 0, 0, width, height);
    dataURL = canvas.toDataURL("image/jpeg"); //dataURL 图片base64 类型
    return dataURL;
  };

  // 根据状态数值和类型返回状态文字描述
  const dictionary = (status: number, type: string) => {
    let statusName = "";
    DICLIST.forEach((item: any) => {
      if (item.key === type) {
        const dic = item.data.find((value: any) => value.key === status);
        statusName = dic ? dic.value : "";
      } else {
        statusName = "";
      }
    });
    return statusName;
  };

  interface statusType {
    key: number;
    value: string;
    color: string;
    bgColor: string;
  }

  // 根据状态数值和类型返回状态所有值
  const dictionaryData = (status: number, type: string) => {
    let statusName = ref();
    DICLIST.forEach((item: any) => {
      if (item.key === type) {
        const dic = item.data.find((value: any) => value.key === status);
        statusName = dic;
      }
    });
    return statusName;
  };

  const MapLoader = () => {
    return new Promise((resolve, reject) => {
      if (window.AMap) {
        resolve(window.AMap);
      }
      window.initAMap = () => {
        resolve(window.AMap);
      };
    });
  };

  // 排序
  const compare = (prop: any) => {
    return (obj1: any, obj2: any) => {
      var val1 = obj1[prop];
      var val2 = obj2[prop];
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    };
  };

  return {
    getBase64,
    dataURLtoFile,
    getBase64Image,
    dictionary,
    dictionaryData,
    MapLoader,
    compare
  };
};