Question

我使用react创建了个人资料照片上传功能。该功能正常工作（照片成功上传所有浏览器而不是firefox）。我把它放在一些控制台日志中，然后在firefox照片中检查成功上传但未出现。在Chrome和其他浏览器我们可以上传并显示该照片

这是我的功能

 handleUpload(e) {
  e.preventDefault();

  const file = this.fileInput.files[0];
  const re = /(?:\.([^.]+))?$/;
  const fExt = re.exec(this.fileInput.files[0].name)[0];

  const md5 = require('md5');
  const newFileName = `${this.state.fname}_${md5(Date.now())}${fExt}`;

  // 
  const id = this.state.id;

  const form_data = new FormData();

  if (typeof (file) !== 'undefined' && id !== null) {
    form_data.append('file', file);
    form_data.append('name', newFileName);


    this.props.actions.uploadPhoto(form_data, id, newFileName).then(() => {
      if (!this.props.home.uploadPhotoPending) {
        if (this.props.home.res.profile_img === `img/profile/${newFileName}`) {
          message.success('Image Uploaded Successfully', 2);
          this.handlePCMCancel();
          this.getImgUrl();
        }
      } else if (this.props.home.uploadPhotoError) {
        message.error('Image Upload failed, try again', 2);
      }
    });
  }
}

和上传模式就是那样

          <Modal
        visible={this.state.PCMvisible}
        title="Upload Profile picture"
        onOk={this.handlePCMOk}
        onCancel={this.handlePCMCancel}
        footer={null}
      >
        <form onSubmit={this.handleUpload} style={{ textAlign: 'center', padding: 5 }}>
          <Avatar src={this.state.imagePreviewUrl} style={{ color: '#ffffff', borderStyle: 'solid', borderWidth: 4, height: 120, width: 120, borderRadius: 70, marginTop: 10 }} /><br />
          <Alert message="You can only upload images, cant edit the images after uploading" type="warning" showIcon /><br />
          <label
            htmlFor="imgUpload"
            className="fileContainer"
          > <span> Choose&hellip; </span>
            <input
              type="file"
              accept="image/gif, image/jpeg, image/png"
              name="imgUpload"
              id="imgUpload"
              ref={(input) => {
              this.fileInput = input;
            }}
              className="inputfile"
              onChange={this.handleFileChange}
            />
          </label>&nbsp;
          <Button htmlType="submit" type="primary">Upload</Button>
        </form>
      </Modal>

任何人都可以帮助我吗？

上传的照片没有出现在Firefox中

0 个答案: