React：将图像上传到 Cloudinary 时如何避免性能问题

Question

我编写了一段可以运行的代码，但它不是杰作。它存在巨大的性能问题。我该如何处理呢？

问题

我的组件的性能存在问题：

1. 发送多张图片很慢，当我发送5张图片时，大约需要1-2分钟。

2. 我如何确保照片仅在提交期间上传到 Cloudinary？因为，例如，当用户选择照片 A，然后环顾四周并选择照片 B 时，照片 A 和 B 都会上传到云端。

问题

在将文件传输到 Cloudinary 时禁用添加相册的按钮是个好主意吗？

请帮助我解决这两个问题，我想确保应用程序顺利运行。太感谢了。

const AddAlbum = () => {

  const [fileUrl, setFileUrl] = useState();

  // MultipleFiles

  const [multipleFileUrl, setMultipleFileUrl] = useState([]);

 

  // cloudnary upload api endpoint

  const api_cloudinary =

    "https://api.cloudinary.com/v1_1/cloudinary_name/image/upload";

  

  // file upload

  const handleSingleFileUpload = async (files) => {

  

    const formData = new FormData();

    formData.append("file", files[0]);

    formData.append("upload_preset", "preset_number");

    // send cloudinary image and presets info

    const res = await fetch(api_cloudinary, {

      method: "POST",

      body: formData,

    });

    const file = await res.json();

    console.log(file);

    const fileUrl = await file.eager[0].url;

    setFileUrl(fileUrl);

  };

  console.log(fileUrl);

  // upload many files cloudnary

  // For now max amount of files is 20

  const handleMultipleFileUpload = async (files, amount) => {

    const formData = new FormData();

    for (let i = 0; i <= files.length; i++) {

      let file = files[i];

      formData.append("file", file);

      formData.append("upload_preset", ""preset_number"");

      const res = await fetch(api_cloudinary, {

        method: "POST",

        body: formData,

      });

      const cloudinaryFiles = await res.json();

      console.log(cloudinaryFiles);

      setMultipleFileUrl(cloudinaryFiles);

    }

  };

  const handleSubmit = async (e) => {

    e.preventDefault();

    console.log(

      `

      Album name:${albumName}

      color:${color}

      Background Image: ${fileUrl}

      files:${multipleFileUrl}

      `

    );

  };

 

Answer 1

您只需要 1 个函数即可处理 1 个或多个图像文件。您需要获取每个文件的内容并将文件内容加载到表单数据中。示例代码使用浏览器FileReader API读取本地图像文件的内容。查看 repl.it 中使用 vanilla JS 的代码。如果有意义，您可以将其放入您的框架中。如果有疑问请告诉我。https://repl.it/@rpeltz/fe-upload#script.js&nbsp;&nbsp;reader.addEventListener( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"load",&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;fileContents&nbsp;=&nbsp;reader.result;https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

我建议使用一个可以为您处理此问题的库。在处理文件上传时，您需要注意许多边缘情况。例如，react-uploady可以为你做到这一点。所以它很简单：import React from "react";import Uploady from "@rpldy/uploady";import UploadButton from "@rpldy/upload-button";const CLOUD_NAME = "<your-cloud-name>";const UPLOAD_PRESET = "<your-upload-preset>";const App = () => (<Uploady    destination={{         url: `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/upload`,        params: {            upload_preset: UPLOAD_PRESET,        }    }}>    <UploadButton/></Uploady>);