上传到 ReactJS 中的 Cloudinary 小部件后，如何取回生成的文件名？

Question

我在我的 React 应用程序中使用 react-cloudinary-upload-widget 来允许用户上传个人资料图片。这个想法是将图像存储在 Cloudinary 上，并将其名称与其他用户信息一起存储在我的 MySQL 数据库中。该小部件将文件正确上传到我的用户文件夹，但上传完成后 return 没有任何内容。 github* 上的代码使它看起来应该 console.log 成功或失败，但控制台中没有显示任何内容。我尝试将一个函数传递给 onSuccess 并且它从未被调用过。我需要 (1) 确认上传成功并且 (2) 取回文件名以便我可以存储它。

*https://github.com/bubbaspaarx/react-cloudinary-upload-widget/blob/master/src/functions/myWidget.js

反应 18.1.0， react-cloudinary-upload-widget 1.6.0

cloudinary-uploader.js:


import { WidgetLoader, Widget } from 'react-cloudinary-upload-widget'

const CloudinaryUploader = () => {

  return (
    <>
      <WidgetLoader /> 
      {/* // add to top of file. Only use once. */}
      <Widget
        sources={['local', 'url', 'camera', 'google_drive', 'facebook']}
        sourceKeys={{ }} 
        resourceType={'image'} 
        cloudName={'mycloud'} 
        uploadPreset={'zgewmw5t'} 
        buttonText={'New image'} 
        style={{
              color: '#372e29',
              border: 'none',
              width: '120px',
              backgroundColor: '#ecca73',
              borderRadius: '4px',
              height: '25px',
              cursor: 'pointer',
              borderRadius: '3px',
              fontFamily: 'Rubik, sans-serif',
              border: '2px solid #ecb939'
            }} 
        folder={'users'} 
        cropping={false} 
        multiple={false} 
        autoClose={true} 
        onSuccess={null} 
        onFailure={null} 
        logging={false} 
        customPublicId={'sample'}
        eager={null} 
        use_filename={false}

        widgetStyles={{
            palette: {
                window: "#FFFFFF",
                windowBorder: "#726255",
                tabIcon: "#BF8900",
                menuIcons: "#372E29",
                textDark: "#372E29",
                textLight: "#FFFFFF",
                link: "#ECB939",
                action: "#FF620C",
                inactiveTabIcon: "#372E29",
                error: "#F44235",
                inProgress: "#0078FF",
                complete: "#20B832",
                sourceBg: "#F5E4BB"
            },
          fonts: {
            default: null,
            "'Fira Sans', sans-serif": {
              url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
              active: true
            }
          }
        }} 
        destroy={true} 
      />
    </>
  )
}

export default CloudinaryUploader```

I tried this:

```  onSuccess={nextFunction()} ```

The function contained a console.log to show it was called.

Answer 1

您可以使用 result.event === "success" 检查上传状态，并使用 result.info 获取文件名。

所以一个完整的例子是：

    var myWidget = window.cloudinary.createUploadWidget(
      {
        cloudName: "<cloud_name>",
        uploadPreset: "<upload_preset>"
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          console.log("Done! Here is the image info: ", result.info);
        }
      }
    );

查看 this full example, I took it from this ticket。

上传到 ReactJS 中的 Cloudinary 小部件后，如何取回生成的文件名？

How do I get back the generated filename after uploading to Cloudinary widget in ReactJS?

cloudinary

reactjs