摘要

在上一篇文章中，我们主要的工作是在AppBuilder中，做了图片管理这样的一个路由。

从上传图片，到图片的展示，我们的服务端代码已经完成。同时也在前端页面进行了接口的调用。现在，有了这些基础，我们就可以在我们的低代码平台中，实现Upload组件了。

1.实现Upload组件

在之前的文章里，已经实现了很多的组件。所以添加组件的过程，这里就不复述了。重点在于Upload组件的实现。

在设计器项目里，我们如果拖拽出来一个Upload组件，上传的图片应该上传到哪里。其实就应该在我们的服务器上，我们之前实现的接口，就可以给它用。

同时，如果上传成功后，我们需要用对应的图片路径进行回显，所以我把代码直接写出来，读者可以根据注释进行理解。

javascript 复制代码

import React, { useState } from 'react'
import { Upload as AntUpload, message} from 'antd'
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";

const beforeUpload =(file: any) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("You can only upload JPG/PNG file!");
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error("Image must smaller than 2MB!");
  }
  return isJpgOrPng && isLt2M;
}

const getBase64 = (img: any,callback: Function) => {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}


export default function Upload(props: any) {
  const { action, comStyle } = props

  const [loading, setLoading] = useState(false)
  // 用来回显图片
  const [img, setImg] = useState("");

  /**
   * 将图片上传到服务器，然后更新图片内容
   * @param info 上传的图片信息
   * @returns 
   */
  const handleChange = (info: any) => {
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      getBase64(info.file.originFileObj, () => {
        setLoading(false);
        setImg(`http://localhost:4000/images/` + info.file.response.filename);
      });
    }
  };

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );


  return (
    <div>
      <AntUpload
        name="file"
        listType="picture-card"
        showUploadList={false}
        action={action || `http://localhost:4000/upload/album`}
        beforeUpload={beforeUpload}
        onChange={handleChange}
        style={comStyle}
      >
        {img ? (
          <img style={{width:'100px', height:'100px',...comStyle}} draggable={false} src={img} alt="avatar" />
        ) : (
          uploadButton
        )}
      </AntUpload>
    </div>
  )
}

然后再根据之前实现组件的经验，将整个过程重复一遍，这个时候我们就可以拖拽Upload组件了。

我们再去看一下Upload组件的API：

根据这些API我们在修改它的属性配置，但其实我们也没什么可控制的，这里我就单独放开上传的action，如果不写就走默认的服务端，如果写了就走特定的服务端。

然后再把样式的属性配置好：

这样一个Upload组件我们就实现完了。

相关的代码提交在github上：
github.com/TeacherXin/...
commit: fix: 第十八节：实现Upload组件

2.实现Image组件

实现Upload组件，我们就可以上传图片了。上传的图片怎么用呢？那一定是需要一个组件进行展示了。

Image组件的实现很简单，只需要将src拿到之后进行展示即可。

javascript 复制代码

import React from 'react'
import { Image as AntImage } from 'antd';

export default function Image(props) {
  const { alt, src, comStyle } = props
  return (
    <div>
      <AntImage
        width={comStyle?.width || 200}
        style={{...comStyle}}
        alt={alt}
        src= { src || "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" }
      />
    </div>
  )
}

然后我们再来到Image组件的API文档里：

将其属性和样式的配置完善，这样我们就实现完了Image组件。

相关的代码提交在github上：
github.com/TeacherXin/...
commit: fix: 第十八节：实现Image组件

博主补充

其实这两个组件的实现不难，和之前实现的卡片容器或者按钮组件，没有什么本质的区别。 主要在于二者需要和服务器进行数据交互，也就是说这两个组件依靠于服务端的能力。

再补充一点，其实在设计态，Upload组件不应该允许用户上传组件，应该在运行态进行上传。但是因为目前我们还没有做运行时，所以这一点放在后面修改。

从零实现一套低代码（保姆级教程）【后端服务】 --- 【5】实现Upload组件和Image组件

摘要

1.实现Upload组件

2.实现Image组件

博主补充