无法读取未定义的属性 'createUploadWidget'

Question

当这个问题出现时，我正在学习 React js 的教程之一。我正在使用 Cloudinary React SDK（React image and video upload). I am using their Upload Widget。但是当我按下按钮打开小部件时，它给了我这个错误 - 'TypeError: Cannot read property 'createUploadWidget' of undefined'
这是脚本 src - <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript" ></script>

这是 App.js 的代码

import React, { useState } from "react";
import "./App.css";

export default function App() {
  const [imageUrl, setimageUrl] = useState(null);
  const [imageAlt, setimageAlt] = useState(null);

  const handleImageUpload = () => {
    const { files } = document.querySelector('input[type="file"]');

    const imageFile = document.querySelector('input[type="file"]');
    // destructure the files array from the resulting object
    const filesa = imageFile.files;
    // log the result to the console
    console.log("Image file", filesa[0]);

    const formData = new FormData();
    formData.append("file", files[0]);
    // replace this with your upload preset name
    formData.append("upload_preset", "xxxxxxx");
    const options = {
      method: "POST",
      body: formData,
    };

    // replace cloudname with your Cloudinary cloud_name
    return fetch(
      "https://api.Cloudinary.com/v1_1/xxxxxx/image/upload",
      options
    )
      .then((res) => res.json())
      .then((res) => {
        setimageUrl(res.secure_url);
        setimageAlt(`An image of ${res.original_filename}`);
      })
      .catch((err) => console.log(err));
  };

  const openWidget = () => {
    // create the widget
    const widget = window.Cloudinary.createUploadWidget(
      {
        cloudName: "xxxxxx",
        uploadPreset: "xxxxx",
      },
      (error, result) => {
        if (result.event === "success") {
          setimageUrl(result.info.secure_url);
          setimageAlt(`An image of ${result.info.original_filename}`);
        }
      }
    );
    widget.open(); // open up the widget after creation
  };

  return (
    <div className="app">
      <section className="left-side">
        <form>
          <div className="form-group">
            <input type="file" />
          </div>

          <button type="button" className="btn" onClick={handleImageUpload}>
            Submit
          </button>
          <button type="button" className="btn widget-btn" onClick={openWidget}>
            Upload Via Widget
          </button>
        </form>
      </section>
      <section className="right-side">
        <p>The resulting image will be displayed here</p>
        {imageUrl && (
          <img src={imageUrl} alt={imageAlt} className="displayed-image" />
        )}
      </section>
    </div>
  );
}

非常感谢任何帮助！

Answer 1

Cloudinary 应以小写形式引用 -

...
const widget = window.cloudinary.createUploadWidget(
...

无法读取未定义的 属性 'createUploadWidget'

Cannot read property 'createUploadWidget' of undefined

javascript

reactjs

cloudinary

无法读取未定义的属性 'createUploadWidget'