我創(chuàng)建了一個(gè)中繼器,因此當(dāng)用戶單擊加號(hào)圖標(biāo)時(shí),會(huì)附加一個(gè)帶有兩個(gè)輸入標(biāo)簽的新行。下面是我的代碼: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細(xì)節(jié).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 }) } }但是我面臨一個(gè)問題,當(dāng)我使用輸入標(biāo)簽的類型“文件”并上傳圖像時(shí),我收到了如下所示的假路徑。C:\fakepath\6t8Zh249QiFmVnkQdCCtHK.jpg我只在 repeater遇到這個(gè)問題。如果我在轉(zhuǎn)發(fā)器外部使用類型為“文件”的輸入標(biāo)簽,那么我將收到正確的路徑。假路徑是主要問題,因?yàn)槿绻姨崛∥募⑵渖蟼鞯?s3,則空?qǐng)D像將上傳到 s3。如何在轉(zhuǎn)發(fā)器中上傳文件?
ReactJS:轉(zhuǎn)發(fā)器中的假路徑問題
蕭十郎
2023-06-15 16:03:32