Cloudinary 小部件未显示在“next-cloudinary”Next Js 13（应用程序路由器）中

Question

我想使用 Cloudinary 小部件上传视频，但它连续显示加载屏幕几分钟

cloudinary widget 的状态：

UploadVideoModal.tsx

"use client";

import {  useCallback, useState } from "react";
import { Box, Button, Modal } from "@mui/material";
import { CldUploadButton } from "next-cloudinary";
import { FcVideoFile } from "react-icons/fc";

import { commonModalStyles } from "@/utils/style";

type Props = {
  open: boolean;
  onClose: () => void;
  tourId: string;
  title: string;
};

const UploadVideoModal = ({ onClose, open, tourId, title }: Props) => {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const handleUpload = useCallback(async (result: any) => {
    console.log(result);
  }, []);

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={commonModalStyles}>
        <CldUploadButton
          options={{ maxFiles: 1 }}
          onUpload={handleUpload}
          uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET}
        >
          <Button
            variant="outlined"
            component="label"
            startIcon={<FcVideoFile />}
            color="info"
            disabled={isLoading}
          >
            Upload
          </Button>
        </CldUploadButton>
      </Box>
    </Modal>
  );
};

export default UploadVideoModal;

很抱歉这个愚蠢的问题，但这是我的第一个 Stack Overflow 问题，之前我曾多次使用过

next-cloudinary

包中的 Cloudinary 小部件，但这是第一次发生。

我想要 Cloudinary 小部件

类似这样的事情

Answer 1

所以我试图找出你的错误，在设置了 nextjs 应用程序后，我开始将你的代码减少到最低限度。这是代码：

"use client";


import {  useCallback, useState } from "react";
import { CldUploadButton } from "next-cloudinary";


const Page = () => {
  const handleUpload = useCallback(async (result: any) => {
    console.log(result);
  }, []);


  return (
        <CldUploadButton
          options={{ maxFiles: 1 }}
          onUpload={handleUpload}
          uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET}
        >
        </CldUploadButton>
  );


};
export default Page;

到目前为止，运行此命令会产生以下输出：

单击角落上的上传文本将按照您的要求打开上传小部件：

此外，上传正在按预期进行。既然你已经说过你之前使用过

next-cloudinary

包，我不认为这可能是用户错误。我建议您查看此支持页面，这可能会对您有所帮助。或者，您可以尝试从最低限度的代码开始，逐步向上，逐一添加组件以找到根本原因。