猿问

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

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

问题

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

  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}

      `

    );

  };

 


慕后森
浏览 118回答 2
2回答

慕尼黑的夜晚无繁华

您只需要 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

呼啦一阵风

我建议使用一个可以为您处理此问题的库。在处理文件上传时,您需要注意许多边缘情况。例如,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>);
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答