如何在 React-dropzone-uploader 中从后端获取响应数据到 React答案

【问题标题】：How to get the response data from backend to React in React-dropzone-uploader如何在 React-dropzone-uploader 中从后端获取响应数据到 React
【发布时间】：2020-09-11 15:07:35
【问题描述】：

 const MyUploader = () => {
    
    const getUploadParams = ({ meta,url }) => {          // specify upload params and url for your files
      console.log("uploadParams",meta,url)
      return { url: '/v1/file_uploads/' }
    }
       
    const handleChangeStatus = ({ meta, file }, status) => {     // called every time a file's `status` changes
      console.log("handleStatus",status, meta, file) 
    }
        
    const handleSubmit = (files, allFiles) => {   // receives array of files that are done uploading when submit button is clicked
      console.log(files.map(f => f.meta))
      allFiles.forEach(f => f.remove())
    }
  
    return (
      <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*"
      />
    )
  }

<MyUploader />

我可以将上传的文件保存在数据库中，保存文件后我会呈现一些信息

render json: {status: "Success", blob: blob, url: URL }

如何控制台记录我在 React 中呈现的这些数据？？

包的链接是：https://github.com/fortana-co/react-dropzone-uploader

【问题讨论】：

标签： reactjs file-upload react-dropzone

【解决方案1】：

我通过将 xhr 作为参数传递给 handleChangeStatus 函数解决了这个问题。

const MyUploader = () => {
    
    const getUploadParams = ({ meta }) => {          // specify upload params and url for your files
      return { url: '/v1/file_uploads/' }
    }  

    const handleChangeStatus = ({ meta, file,xhr }, status) => {     // called every time a file's `status` changes
      console.log("handleStatus",status, meta, file) 
      if(status == "done") { 
        var json = JSON.parse(xhr.response)
        var arr_blob_ids = state.documents_blob_ids.slice()
        console.log("id added",json.blob.id)
        if (json.blob.id){
          arr_blob_ids.push(json.blob.id)
          setState({...state,documents_blob_ids: arr_blob_ids})
        }
       }

      else if(status == "removed") {
        var json = JSON.parse(xhr.response)
        var arr_blob_ids = state.documents_blob_ids.slice()
        console.log("id removed",json.blob.id)
        if (json.blob.id){
          arr_blob_ids =  arr_blob_ids.filter( v => v!= json.blob.id)
          setState({...state,documents_blob_ids: arr_blob_ids})
        }       
      }
     
    }
        
    const handleSubmit = (files, allFiles) => {   // receives array of files that are done uploading when submit button is clicked
      console.log(files.map(f => f.meta))
      allFiles.forEach(f => f.remove())
    }
  
    return (
      <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*"    
        submitButtonContent = {null}
        SubmitButtonComponent = {null}    
      />
    )
  }

【讨论】：