我想在使用React js上传文件后,显示一个成功的警告贴。

我使用React js filepond组件上传文件。然后我把上传的文件转换成base64字符串格式。我想在上传文件后打印一个绿色的文字 “成功”。props.values.addendumA = converted 声明中 if (file [0]). 我如何才能做到这一点?

React js

<Form className="orange-color ml-2">
  <FilePond
    ref={ref => ref}
    allowFileEncode={true}
    allowMultiple={false}
    oninit={() => console.log("FilePond A has initialised")}
    onupdatefiles={fileItems => {
      let file = fileItems.map(fileItem => fileItem.file);

      let coded = file[0];
      if (file[0]) {
        let reader = new FileReader();
        reader.onload = event => {
          console.log(event.target.result);
        };
        let converted = reader.readAsDataURL(coded);

        props.values.addendumA = converted;

        //TODO HERE
        ("Successfully uploaded");
      }
      console.log(props.values.addendumA);
    }}
  />
</Form>

解决方案:

你可以显示一个成功 toast 使用 react-toastify. 这真的很简单,也很方便,下面是你的操作方法。首先,运行 yarn add react-toastifynpm install toastify.

然后在你要显示吐司的组件中导入包。

import { toast } from "react-toastify";
props.values.addendumA = converted;
    toast.success("Successfully uploaded");
  }

最后一步是将 ToastContainer 的根组件中,很可能是在你的 App.js 这样的文件。不要忘记在根组件中导入这些包。

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

将这个组件添加到你的 return 方法。

<ToastContainer autoClose={3000} hideProgressBar />

给TA打赏
共{{data.count}}人
人已打赏
未分类

作为变量的Groovy方法

2022-9-9 1:39:21

未分类

如何让map函数返回一个比第一个数组大的数组?

2022-9-9 1:39:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索