[React]：上传文件，更改状态以显示预览，然后等待上传前提交答案

【问题标题】：[React]: Uploading file, Changing state to show preview, then waiting for upload before submit[React]：上传文件，更改状态以显示预览，然后等待上传前提交
【发布时间】：2021-09-05 17:48:05
【问题描述】：

我是 React 的初学者，并尝试运行一个异步函数来实现这一点，但是它一直在中断，我不确定我做错了什么。

应用当前在做什么：

我输入一个文件并点击上传以发布它
文件上传并设置状态，显示预览
然后我点击提交提交表单。

应该怎么做

在我输入文件后自动“上传”文件 (onChange)
等到文件上传到 Firestore 后才允许提交表单

我的处理程序

    event.preventDefault();
    if (this.state.screamImage === "") {
      this.props.postScream({
        productName: this.state.productName,
        body: this.state.body,
        price: this.state.price,
        charge: this.state.charge,
        screamImage:
          "https://firebasestorage.googleapis.com/v0/b/auth-development-2fa3c.appspot.com/o/no-img2.jpg?alt=media",
      });
    } else
      this.props.postScream({
        productName: this.state.productName,
        body: this.state.body,
        price: this.state.price,
        charge: this.state.charge,
        screamImage: this.screamData,
      });
  };

  fileOnChange = (event) => {
    this.setState({
      [event.target.name]: event.target.files[0],
    });
  };

  fileUploadHandler = () => {
    const formData = new FormData();
    formData.append(
      "image",
      this.state.screamImage,
      this.state.screamImage.name
    );
    axios.post("/scream/image", formData).then((res) => {
      this.screamData = res.data.screamImageUrl;
      console.log(this.screamData);
      return this.screamData;
    });
  };

回归

                  <input
                    type="file"
                    name="screamImage"
                    onChange={this.fileOnChange}
                  />
                  <Button onClick={this.fileUploadHandler}>Upload</Button>
                  <Button
                    type="submit"
                    variant="contained"
                    color="primary"
                    className={classes.submitButton}
                    disabled={loading}
                  >
                    Submit
                    {loading && (
                      <CircularProgress
                        size={30}
                        className={classes.progressSpinner}
                      />
                    )}

对不起，如果这只是一个简单的修复，我似乎还无法掌握异步函数的窍门。谢谢！

【问题讨论】：

标签： javascript reactjs firebase asynchronous axios

【解决方案1】：

有些事情不会像你期望的那样工作。

onChange只是改变状态，并没有启动上传功能：

fileOnChange = (event) => {
    this.setState({
      [event.target.name]: event.target.files[0],
    });
  };

quiq 修复方法是使用 setState 回调调用函数，如下所示：

fileOnChange = (event) => {
    this.setState({
      [event.target.name]: event.target.files[0],
    },()=>{this.fileUploadHandler()});
  };

【讨论】：

感谢您的回复！这里的问题是，当我尝试此修复时，它会先设置状态，然后再上传文件，这意味着预览会损坏。另外，如果我选择文件并单击“取消”，则没有要读取的数据，这也会破坏它
您能否更新您的问题以更详细并分享您的整个文件。有很多我们看不到的部分，但我们可以用我们的 sn-ps 打破。
嗨，Tarik，感谢您的宝贵时间！我实际上最终弄清楚了，我会尽快发布答案:)
嗨，很高兴听到这个消息。如果他们有类似或相同的问题，如果您可以分享其他人的答案，那就太棒了。
刚刚贴在下面！将来我将更改我的代码以使其能够使用文件阅读器读取文件，并且仅在表单提交上发布，一旦我完成了也会发布

【解决方案2】：

如果有人在处理文件更改时遇到同样的问题，这里就是答案！我遇到的一个大问题是一个错误，指出 formData“值”不是 Blob。这是我的解决方法，在设置状态之前，我必须将“图像”定义为目标文件，然后将其用作值：

fileOnChange = (event) => {
    const screamImage = event.target.files[0];
    const formData = new FormData();
    formData.append("image", screamImage, Image.name);
    axios.post("/scream/image", formData).then((res => {
      this.screamData = res.data.screamImageUrl;
      console.log(this.screamData)
      return this.screamData
    })).then(()=> {
      this.setState({
        screamImage: this.screamData,
    });
    });
  };

【讨论】：