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

Question

我编写了一段可以运行的代码，但它不是杰作。它存在巨大的性能问题。我该如何处理呢？问题我的组件的性能存在问题：发送多张图片很慢，当我发送5张图片时，大约需要1-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

  reader.addEventListener(
        "load", function () {
                const fileContents = 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>);