上传pdf图片 文件

我们今天实现一下图片上传，前端用到的是antdesign中的文件上传，后端是自己封装的node的koa框架。

这个过程大致是：前端将图片提交给后端，后端将其存入后端项目的文件夹中，然后将图片所在路径返回给前端，前端得到图片路径后将图片路径再提交到后端保存的接口，存入数据库中

总结（1）上传图片并且获得图片地址 （2）存入数据库

1.标签部分

配置项含义👉   上传 Upload - Ant Design

        上传文件
        <Upload
          // 对应后端的 ctx.request.files.file
          name="file"
          listType="text"
          className="avatar-uploader"
          showUploadList={false}
          action="/api/client/Upload"
          beforeUpload={beforeUpload}
          onChange={handleChange}
        >
          <Button type="primary" style={{ marginTop: 8, marginLeft: 10 }}>
            请上传相关PDF文件
          </Button>
          {/* <div style={{ marginTop: 8 }}>Upload</div> */}
        </Upload>

2.定义方法转化为base64（传输格式，才能从浏览器传到后端（服务端））

  // 转为base64
  const getBase64 = (img: Blob, callback: any) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };

 3.上传文件(判断根据不同状态调用不同方法)

  const handleChange = (info: any) => {
    console.log(info.file, 'info');
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj, (file_url: any) => {
        // setImageUrl(imageUrl);
        setSubmitData({ ...submitData, file_url: info.file.response.url });
        // setSubmitParams({ ...submitParams, cover: info.file.response.url });
        setLoading(false);
      });
    }
  };

 接口返回：返回的是图片所在的路径，这个路径是存到数据库的

antdesign + koa 实现图片上传 - 掘金