使用 FileReader 将上传的图像转换为 URL

Question

我是一个新的开发人员，有时我不明白我的错误。 在这里我收到一个错误Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. . 我不确定错误指的是什么参数或如何使其成为 Blob 类型。 我在想它应该被转换成一个数组，但这也不起作用。 任何人都可以帮忙吗？ 我的目标是允许用户上传和图像我想将该图像转换为 URL 并在屏幕上显示图像的预览。

这是处理我上传的图像的功能

 const onFileSelect = (fieldName) => (event) => {
    console.log(event.target.value)
    
    const reader = new FileReader()
    const image = event.target.value
    
    reader.addEventListener("load", () => {
      console.log(image.results)

    }, false)
    reader.readAsDataURL(image)
    // const newImage = {...newOrg.logoURL, [fieldName]: event.target.value}
  }

这是我允许用户上传图像的输入字段

<FormGroup>
      <div>
          
       <Input 
       type="file"
       name="data.logoURL"
       onChange={onFileSelect("logoURL")}
       accept="image/*"
       />{" "}

        </div>
      </FormGroup>

如果我没有显示足够的代码，请告诉我。

Answer 1

假定Input是在一个包装input ，该文件是不可用的value属性（ value始终是一个字符串input元件）。 它在名为files的类似数组的文件列表中可用。 所以对于第一个：

const image = event.target.files[0]
// −−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^