【UEditor富文本框】支持图片上传到文件服务器

糯米麻糖

于 2022-01-22 18:59:42 发布

阅读量723

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 React 文章标签：服务器前端 javascript

本文链接：https://blog.youkuaiyun.com/gkf6104/article/details/122641823

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

React

16 篇文章

订阅专栏

本文介绍了一个用于上传图片到服务器的功能实现方法，包括图片格式验证、大小限制及尺寸调整等内容。该功能通过使用 FormData 对象来封装图片文件，并通过 API 接口完成上传。此外，还实现了根据指定宽度调整图片尺寸的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传图片到服务器

import API from "@utils/api";
import { MAX_SIZE } from '@utils/sheet/constant'
import { message } from "antd";

export const requestUploadImg = (blob: any, width: number, pageHeight: number) => {

  let imgWidth: number;
  if (width) {
    imgWidth = width * (2 / 3);
  }
  if (!blob) {
    message.error("请选择上传文件");
    return;
  }

  const formData = new FormData();
  if (!/(.*)\.(jpg|jpeg|png|JPEG|PNG|JPEG)$/.test(blob.name)) {
    message.error("仅支持JPG、JPEG、PNG等图片格式");
    return;
  }
  if (blob.size > MAX_SIZE) {
    message.error("图片大小不能超过5M");
    return;
  }
  formData.append("file", blob);
  formData.append("type", "image");
  return API.uploadImg(formData).then((res) => {
    if (res.success && res.datas && res.datas.url) {
      let w = res.datas.width;
      let h = res.datas.height;
      const hwRatio = h / w;
      const whRatio = w / h;
      if (imgWidth && res.datas.width > imgWidth) {
        w = imgWidth;
        h = hwRatio * w;
      } else if (h > pageHeight) {
        h = pageHeight;
        w = h * whRatio;
      }
      return { ...res, w, h };
    }
  });
};