如何将 cloudinary 与 ant 设计上传组件一起使用？

Question

当我上传文件时，我正在尝试使用 cloudinary 来托管所有图像数据，但我不断收到 AjaxUploader Uncaught (in promise) TypeError: request is not a function error。我很难弄清楚如何将它与我从官方文档中获得的 ant 设计上传组件一起使用。它应该能够上传最多 5 个文件，如果还有更多，它会有条件地取消渲染上传按钮，我已经完成了。我只是不知道如何处理 customRequest 属性，我所有的工作都在 serverUpload 函数上完成。这是沙盒的链接：https://codesandbox.io/s/happy-sun-n9uus?file=/src/App.js

import React, { useState } from "react";
import Modal from "react-modal";
import { Form, Input, Button, Upload, message } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import axios from "axios";
import cloudinaryInfo from "./cloudinaryInfo/config.js";

const layout = {
  labelCol: {
    span: 8
  },
  wrapperCol: {
    span: 16
  }
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
  required: "${label} is required!",
  types: {
    email: "Your email is not a valid email!"
  }
};
/* eslint-enable no-template-curly-in-string */

const Question = ({ questionObj, productObj, updatedDataList }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [imageFilesList, setImageFilesList] = useState([]);

  const toggleModal = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsModalOpen(!isModalOpen);
  };

  const serverUpload = async (options) => {
    const { onSuccess, file, onError, onProgress } = options;
    console.log("imageFilesList: ", imageFilesList);
    try {
      const result = await Promise.all([]);
      for (let i = 0; i < imageFilesList.length; i++) {
        let file = imageFilesList[i];
        console.log("FILE: ", file);
        const formData = new FormData();
        formData.append("file", file);
        formData.append(
          "upload_preset",
          cloudinaryInfo.CLOUDINARY_UPLOAD_PRESET
        );
        result.push(
          axios.post(cloudinaryInfo.CLOUDINARY_IMAGE_UPLOAD_URL, formData)
        );
      }
      onSuccess("ok");
    } catch (err) {
      console.log(err);
      onError(err);
    }
  };

  const uploadProps = {
    name: "file",
    customRequest: { serverUpload },
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log("Not uploading ", info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
      setImageFilesList(info.fileList);
    },
    listType: "picture",
    maxCount: 5,
    multiple: true,
    onDrop: true
  };

  const modalContent = (
    <Form
      {...layout}
      name="nest-messages"
      onFinish={(values) => console.log(values)}
      validateMessages={validateMessages}
    >
      <Upload {...uploadProps}>
        {imageFilesList.length < 5 && (
          <Button icon={<UploadOutlined />}>Upload (Max: 5)</Button>
        )}
      </Upload>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );

  return (
    <div className="question">
      <button onClick={(e) => toggleModal(e)}>Open Modal</button>
      <hr style={{ height: 0.5, borderColor: "red" }} />
      {isModalOpen && (
        <div className="openPanel">
          <Modal
            isOpen={isModalOpen}
            onRequestClose={(e) => toggleModal(e)}
            ariaHideApp={false}
            style={{
              overlay: {
                backgroundColor: "grey"
              }
            }}
          >
            {modalContent}
            <Button onClick={(e) => toggleModal(e)}>Close</Button>
          </Modal>
        </div>
      )}
    </div>
  );
};

export default Question;

Answer 1

serverUpload() 是处理请求的自定义函数。你不把它传递给action prop，你必须把它传递给antd upload customRequest prop，这就是自定义请求的地方。

action 属性用于接受文件的 URL，一旦您对 antd 的上传默认操作进行任何修改，您必须使用 customRequest。

见here