ReactJS：转发器中的假路径问题

Question

我创建了一个中继器，因此当用户单击加号图标时，会附加一个带有两个输入标签的新行。下面是我的代码：repeater.jsimport React from "react"const Details = (props) => {  return (    props.Desc !== '' ?      props.Desc.map((val, idx) => {        let desc = ` desc-${idx}`, file = `file-${idx}`        return (          <tr key={val.index}>            <td> Description</td>              <td >                <input type="text" defaultValue={val.desc} name="desc" data-id={idx} id={desc} className="form-control " />              </td>            <td className="mr-2">  Files</td>            <td>              <input type="file" defaultValue={file} name="file" id={file} data-id={idx} className="form-control " />            </td>            <td>              {                idx === 0 ? <button onClick={() => props.add()} type="button" className="btn btn-primary text-center"><i className="fa fa-plus-circle" aria-hidden="true"></i></button>                  : <button className="btn btn-danger" onClick={(() => props.delete(val))} ><i className="fa fa-minus" aria-hidden="true"></i></button>              }            </td>          </tr >        )      })      : null  )}export default Details细节.jsimport React, { Fragment, Component } from 'react'import Details from './repeater.js'class CreateDetail extends Component {    constructor(props) {        super(props);        this.state = {            inputList: [{ index: Math.random(), desc: "", file: "" }],        }    }    onSubmit = (e) => {        console.log('data : ', this.state.inputList[0]);    }     handleChange = (e) => {         if (["desc", "file"].includes(e.target.name)) {             let Desc = [...this.state.inputList]             inputList[e.target.dataset.id][e.target.name] = e.target.value;         } else {             this.setState({ [e.target.name]: e.target.value })         }     }但是我面临一个问题，当我使用输入标签的类型“文件”并上传图像时，我收到了如下所示的假路径。C:\fakepath\6t8Zh249QiFmVnkQdCCtHK.jpg我只在 repeater遇到这个问题。如果我在转发器外部使用类型为“文件”的输入标签，那么我将收到正确的路径。假路径是主要问题，因为如果我提取文件名并将其上传到 s3，则空图像将上传到 s3。如何在转发器中上传文件？

Answer 1

浏览器不允许获取文件的本地路径。您可以将数据用作表单数据并将其存储在状态中并可以将其发送到 S3。喜欢

      handleChange = (e) => {

             let formData = new FormData

for (var i = 0; i < e.target.files.length; i++) {

    formData.append(e.target.name, e.target.files[i])

}

             .....

         }