Question

我使用以下代码将图像作为用户输入 <input type="file" onChange={this.fileUpload}/>

我想将图片转换为网址。

这是我在fileUpload()函数中使用的

fileUpload = (event) => {
   let src = event.target.value.getAsDataURL();
   this.setState({
     image: src
   });
 }

请告诉我如何将图片转换为网址。

Answer 1

将ref添加到输入标记，以便您可以访问该元素的dom：

<input type="file" ref={this.myFiles} onChange={this.fileUpload}/>

fileUpload=()=>{
    // Now get files in the FileList object
    const files = this.myFiles.files
    // Define what type of file to accept:
    const accept = ["image/png"];
    if (accept.indexOf(files[0].mediaType) > -1) {
       this.setState({
           image: files[0].getAsDataURL()
       })
    }

 }

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/File/getAsDataURL

Answer 2

您可以使用下面的函数作为ImageChange函数，并使用状态变量imagePreviewUrl来预览图像。

    _handleImageChange(e) {

    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
    }

    reader.readAsDataURL(file)
  }

如何将用户输入图像转换为反应中的URL

2 个答案: