Question

我希望从输入的本地文件中设置背景图像。

但是会出现“ net :: ERR_UNKNOWN_URL_SCHEME”错误消息。

我的输入标签：

<input
  accept="image/*"
  className="input_img"
  type="file"
  onChange={e => this.uploadImage(e)}
/>

我的uploadImage函数：

uploadImage = e => {
   let node = document.getElementById("result");

   node.style.backgroundImage = "url(" + e.target.result + ")";
};

我该怎么做？

Answer 1

您可以使用FileReader来读取文件的数据，然后将backgroundImage设置为结果。

示例

class App extends Component {
  uploadImage = (e) => {
    const { files } = e.target;
    if (files.length === 0) {
      return;
    }

    const file = files[0];
    const fileReader = new FileReader();

    fileReader.onload = () => {
      this.background.style.backgroundImage = `url(${fileReader.result})`;
    };
    fileReader.readAsDataURL(file);
  };

  render() {
    return (
      <div>
        <input
          accept="image/*"
          className="input_img"
          type="file"
          onChange={this.uploadImage}
        />
        <div
          style={{width: 200, height: 200}}
          ref={ref => this.background = ref}
        ></div>
      </div>
    );
  }
}

如何从输入文件设置backgroundImage？

1 个答案: