react+TS使用antd Upload组件自定义上传

这个项目是使用antd和react+ts写的，其中遇到上传图片的一个问题，antd的Upload组件并不能满足所有的开发情况，有时候我们在上传图片的同时也需要我们上传其他参数，或者是添加图片之后并不希望直接上传到服务器上而是等待用户填写其他数据之后点击确定按钮上传，这就需要我们自定义上传文件，取消默认的行为。

组件二次封装

import React, { useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { Modal, Upload } from "antd";
import type { RcFile, UploadProps } from "antd/es/upload";
import type { UploadFile } from "antd/es/upload/interface";

//传递props中包含开始要显示的fileList，图片改变的后的回调函数
export function MyUpload({
  onChangeFn,
  fileList,
}: {
  onChangeFn: (file: any) => void;
  fileList: any;
}) {
//这个函数是用于图片实现弹窗预览获取图片预览的编码的
  const getBase64 = (file: RcFile): Promise<string> =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = (error) => reject(error);
    });

  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [previewTitle, setPreviewTitle] = useState("");

  const handleCancel = () => setPreviewOpen(false);

  const handlePreview = async (file: UploadFile) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj as RcFile);
    }

    setPreviewImage(file.url || (file.preview as string));
    setPreviewOpen(true);
    setPreviewTitle(
      file.name || file.url!.substring(file.url!.lastIndexOf("/") + 1)
    );
  };

  const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) => {
    onChangeFn(newFileList);
  };
  return (
    <>
      <Upload
        listType="picture-card"
        fileList={fileList}
        onPreview={handlePreview}
        onChange={handleChange}
        //beoreUpload返回值为false的时候会取消默认上传行为
        beforeUpload={() => false}
      >
        {
        //这里我们限制死了图片个数是8个，也可以通过props传参进行限制
        fileList.length >= 8 ? null : (
          <div>
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>上传</div>
          </div>
        )}
      </Upload>
      //图片预览
      <Modal
        open={previewOpen}
        title={previewTitle}
        footer={null}
        onCancel={handleCancel}
      >
        <img alt="example" style={{ width: "100%" }} src={previewImage} />
      </Modal>
    </>
  );
}

组件的使用

import React, { useState } from "react";
import { MyUpload } from "../../components/myUpload";
import { Button } from "antd";

export default function OrderManage() {
  const [fileList, setFilseList] = useState<any[]>([])
  function sendImg() {
    if (fileList.length === 0) {
      // 没有上传图片
      return
    }
    const formdata = new FormData()
    for (let i = 0; i < fileList.length; i++) {
      // 将要上传的文件添加到formdata对象中
      formdata.append('file', fileList[i].originFileObj)
    }
    // 添加其他参数
    // 请求接口
  }
  return <div>
    <MyUpload fileList={fileList} onChangeFn={setFilseList}></MyUpload>
    <Button onClick={sendImg}>确定</Button>
  </div>;
}

总结

用react写项目也有一段时间了，最大的感受就是react非常的灵活，这样写可以，那样写也可以，可能学的时候视频上没有教怎么写项目吧，这就导致我在写这个项目的时候经常的考虑这样写对不对，虽然功能也都实现了，但是总感觉自己写的不是很好，这就导致写过的东西会一直考虑写的好不好，然后不断的修改，还有的就是感觉这个项目拖的时间有点长，算一下差不多也有两个星期了，但是交互的东西并不是很多，而且每天写项目的时间也不像之前考核写项目那么多，之后项目要赶一下，虽然只有一个人，但是前期的工作都差不多了，剩下的就是简单的用接口交互就行了。