javascript - 如何从输入文件设置背景图像？

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>
    );
  }
}