时间戳

首页 > 解决方案 > 如何在反应中将文件上传到后端

reactjs - 如何在反应中将文件上传到后端

问题描述

我正在尝试使用 react 作为前端将文件上传到我的后端程序。后端在 Postman 中运行良好。但是当我尝试通过反应上传它时，它不允许上传。同时我能够从后端获取文件并显示它以供下载。以下是我的上传代码：

const[selectedFiles,setSelectedFiles] = useState(undefined)
    const[file,setFile] = useState(undefined)
    const[progress,setProgress] = useState(0)
    const[message,setMessage] = useState("")
    const[fileInfos,setFileInfos] = useState([])

...

const uploadFile = async () => {
        setFile(selectedFiles[0])
        let formData = new FormData()
        formData.append('file',file)
        await axios.post("http://localhost:8080/upload",formData)
        .then(response => {
            setMessage(response.data.message)
            return UploadFilesService.getFiles()
        })
        .catch(err => {
            setProgress(0)
            setMessage("Unable to upload the file at the moment")
            setFile(undefined)
        })

        setSelectedFiles(undefined) 

    }

...

<label className="btn btn-default">
          <input type="file" onChange={(e) => setSelectedFiles(e.target.files)} />
        </label>

        <button className="btn btn-success"
          disabled={!selectedFiles}
          onClick={uploadFile}
        >
          Upload
        </button>

尝试上传时，控制台中出现以下错误消息：

xhr.js:177 POST http://localhost:8080/upload 400
dispatchXhrRequest  @   xhr.js:177
xhrAdapter  @   xhr.js:13
dispatchRequest @   dispatchRequest.js:52
Promise.then (async)        
request @   Axios.js:61
Axios.<computed>    @   Axios.js:87
wrap    @   bind.js:9
uploadFile  @   FileUpload.js:36
callCallback    @   react-dom.development.js:3945
invokeGuardedCallbackDev    @   react-dom.development.js:3994
invokeGuardedCallback   @   react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @   react-dom.development.js:4070
executeDispatch @   react-dom.development.js:8243
processDispatchQueueItemsInOrder    @   react-dom.development.js:8275
processDispatchQueue    @   react-dom.development.js:8288
dispatchEventsForPlugins    @   react-dom.development.js:8299
(anonymous) @   react-dom.development.js:8508
batchedEventUpdates$1   @   react-dom.development.js:22396
batchedEventUpdates @   react-dom.development.js:3745
dispatchEventForPluginEventSystem   @   react-dom.development.js:8507
attemptToDispatchEvent  @   react-dom.development.js:6005
dispatchEvent   @   react-dom.development.js:5924
unstable_runWithPriority    @   scheduler.development.js:646
runWithPriority$1   @   react-dom.development.js:11276
discreteUpdates$1   @   react-dom.development.js:22413
discreteUpdates @   react-dom.development.js:3756
dispatchDiscreteEvent   @   react-dom.development.js:5889

标签： reactjsfile-upload

解决方案

让我们检查一下

submit(){
    const data = new FormData() 
    data.append('file', this.state.selectedFile)
    console.warn(this.state.selectedFile);
    let url = "http://localhost:8000/upload.php";

    axios.post(url, data, { // receive two parameter endpoint url ,form data 
    })
    .then(res => { // then print response status
        console.warn(res);
    })

}

如果您的问题无法解决，请随时再次询问。

拉明血红蛋白

推荐阅读