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

Question

我创建了一个中继器，因此当用户单击加号图标时，会附加一个带有两个输入标签的新行。下面是我的代码：repeater.js

import 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

细节.js

import 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。喜欢&nbsp; &nbsp; &nbsp; handleChange = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let formData = new FormDatafor (var i = 0; i < e.target.files.length; i++) {&nbsp; &nbsp; formData.append(e.target.name, e.target.files[i])}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.....&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}