时间戳

首页 > 解决方案 > event.file 和 event.target.files 之间的区别

javascript - event.file 和 event.target.files 之间的区别

问题描述

我正在尝试formData与 React 一起使用来存储图像文件并使用 Axios 发送到后端服务。

这是我的组件：

<Dragger
        ref={el}
        type="file" 
        name='file'
        multiple={true}
        onChange={(event) => {
            uploadFile(event.file)
        }}
>
    <p className="ant-upload-drag-icon">
        <InboxOutlined />
    </p>
    <p className="ant-upload-text">
        Click or drag file to this area to upload
    </p>
    <p className="ant-upload-hint">
        Once selected, the file will automatically be uploaded.
    </p>
</Dragger>

这是我formData在将其发送到 API 之前的访问方式：

const uploadFile = file => {
    const formData = new FormData()
    formData.append('file', file)
    // api request ...
}

这不起作用。

我见过人们使用的其他实现event.target.files[0]；我已经对此进行了测试，并且确实有效。

有没有办法让event.file工作？不是event.file和event.target.file[0]一样吗？

编辑：

这是ant design中dragger组件的来源：https ://github.com/ant-design/ant-design/tree/master/components/upload

标签： javascriptreactjs

解决方案

我最近使用了这个组件，所以我可以解释我是如何让它工作的。onChange您可以简单地使用actionDragger 组件的 prop 告诉它将文件发送到哪里，而不是使用来上传文件。然后，您可以onChange在上传完成后更新您的 UI。

<Upload.Dragger
  action={'/myImageRoute'}
  beforeUpload={beforeUpload}
  accept='.png,.jpg,.jpeg,.webp'
  withCredentials={true}
  onChange={({ file }) => file.status === 'uploading' ? setLoading(true) : setLoading(false)}
/>

推荐阅读