1

在将图像上传到服务器之前尝试显示图像预览时出现问题。我正在使用 reactjs。

我的问题是，当我尝试上传图片时，我得到了文件数据，但是当我使用阅读器时，它不返回本地 URL，只显示undefined

这是我尝试关注的主题get-image-preview-before-uploading-in-react

但是当我尝试检查我的图片本地网址时，它会返回undefined

这是我在文件中导入的内容：

import React, {Component} from "react";
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem  } from 'mdbreact';

这是我的js：

<p className="text-upload">Front Desain</p>
<input ref="file" type="file" name="front Design" onChange={this.frontDesign}/>

这是我的方法或功能：

  frontDesign = (e) =>{
    var file = this.refs.file.files[0];
    var reader = new FileReader();
    var url = reader.readAsDataURL(file);

    reader.onloadend = function (e) {
        this.setState({
          form:{
            frontDesign: [reader.result]
          }
        })
      }.bind(this);
    console.log("Check Data : ", file)
    console.log("Check URL : ", url)

  }

这是我的状态：

  state ={
    form:{
      frontDesign: [],
    }
  }

这是我的控制台： 我在控制台中得到了什么

这是我的代码框：

https://codesandbox.io/s/tender-mclaren-zb1l7?fontsize=14

有人可以帮我解决这个问题吗？

4

2 回答 2

2

在 mozilla 网站上，您需要为您的阅读器添加一个加载事件侦听器。某些版本的 IE 不支持此示例代码。

...

reader.addEventListener("load", () => {
  this.setState(state => ({
    ...state,
    form:{
      frontDesign: [reader.result]
    }
  }))
  const url = reader.result;
  console.log(url);
}, false);

...

在这里工作 condeSanbox：https ://codesandbox.io/s/affectionate-lamport-dnbij

于 2019-08-17T08:06:48.643 回答
0

这里不需要使用 ref。尝试在下面编写代码

frontDesign = (e) => {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = (e) => {
    //Image URL e.target.result
    this.setState({
      form:{
        frontDesign: [e.target.result]
      }
    })
  }
  reader.readAsDataURL(file);
}
于 2019-08-17T07:33:14.520 回答