React.js, सर्वर

Question

पर एक मल्टीपार्ट/फॉर्म-डेटा कैसे भेजें, हम बैकएंड में मल्टीपार्ट/फॉर्म के रूप में एक छवि फ़ाइल भेजना चाहते हैं, हम फ़ाइल प्राप्त करने के लिए HTML फॉर्म का उपयोग करने और फ़ाइल को फॉर्मडेटा के रूप में भेजने का प्रयास करते हैं, यहां कोड

export default class Task extends React.Component { 

    uploadAction() { 
    var data = new FormData(); 
    var imagedata = document.querySelector('input[type="file"]').files[0]; 
    data.append("data", imagedata); 

    fetch("http://localhost:8910/taskCreationController/createStoryTask", { 
     mode: 'no-cors', 
     method: "POST", 
     headers: { 
     "Content-Type": "multipart/form-data" 
     "Accept": "application/json", 
     "type": "formData" 
     }, 
     body: data 
    }).then(function (res) { 
     if (res.ok) { 
     alert("Perfect! "); 
     } else if (res.status == 401) { 
     alert("Oops! "); 
     } 
    }, function (e) { 
     alert("Error submitting form!"); 
    }); 
    } 

    render() { 
    return (
     <form encType="multipart/form-data" action=""> 
      <input type="file" name="fileName" defaultValue="fileName"></input> 
      <input type="button" value="upload" onClick={this.uploadAction.bind(this)}></input> 
     </form> 
    ) 
    } 
} 

त्रुटि बैकएंड में "नेस्टेड अपवाद नहीं है कर रहे हैं org.springframework.web.multipart.MultipartException है: बहुखण्डीय सर्वलेट अनुरोध पार्स नहीं कर सका; नेस्टेड अपवाद java.io.IOException है: org.apache। tomcat.util.http.fileupload.FileUploadException: अनुरोध अस्वीकार कर दिया गया था क्योंकि कोई मल्टीपार्ट सीमा नहीं मिली "। पथ के साथ संदर्भ में Servlet.service() सर्वलेट [dispatcherServlet] के लिए:

fetch("http://localhost:8910/taskCreationController/createStoryTask", { 
     mode: 'no-cors', 
     method: "POST", 
     headers: { 
     "Content-Type": "multipart/form-data; boundary=AaB03x" + 
     "--AaB03x" + 
     "Content-Disposition: file" + 
     "Content-Type: png" + 
     "Content-Transfer-Encoding: binary" + 
     "...data... " + 
     "--AaB03x--", 
     "Accept": "application/json", 
     "type": "formData" 
     }, 
     body: data 
    }).then(function (res) { 
     if (res.ok) { 
     alert("Perfect! "); 
     } else if (res.status == 401) { 
     alert("Oops! "); 
     } 
    }, function (e) { 
     alert("Error submitting form!"); 
    }); 
    } 

इस बार, बैकएंड में त्रुटि है:

this पढ़ने के बाद, हम लाने में हेडर के लिए सीमा निर्धारित करने की कोशिश की [] अपवाद फेंक दिया [अनुरोध प्रसंस्करण विफल; नेस्टेड अपवाद java.lang.NullPointerException] रूट कारण

क्या हम मल्टीपार्ट सीमा को सही जोड़ते हैं? यह कहाँ होना चाहिए? शायद हम पहले गलत हैं क्योंकि हमें मल्टीपार्ट/फॉर्म-डेटा नहीं मिलता है। हम इसे सही तरीके से कैसे प्राप्त कर सकते हैं?

Answer 1

हम सिर्फ हमारी हेडर को दूर करने के लिए प्रयास करें और यह काम करता है!

fetch("http://localhost:8910/taskCreationController/createStoryTask", { 
     mode: 'no-cors', 
     method: "POST", 
     body: data 
    }).then(function (res) { 
     if (res.ok) { 
     alert("Perfect! "); 
     } else if (res.status == 401) { 
     alert("Oops! "); 
     } 
    }, function (e) { 
     alert("Error submitting form!"); 
    }); 

Answer 2

multipart/formdata भेजने के लिए, आप contentType से बचने की जरूरत के बाद से ब्राउज़र अपने boundary और Content-Type प्रदान करती है।

fetch का उपयोग कर अपने मामले में, भले ही आप Content-Type से बचें, यह डिफ़ॉल्ट text/plain पर सेट हो जाता है। तो jQuery ajax के साथ प्रयास करें। जो contentType को हटा देता है अगर हम इसे गलत पर सेट करते हैं।

यह काम कर कोड

var data = new FormData(); 
var imagedata = document.querySelector('input[type="file"]').files[0]; 
data.append("data", imagedata); 
$.ajax({ 
    method: "POST", 
    url: fullUrl, 
    data: data, 
    dataType: 'json', 
    cache: false, 
    processData: false, 
    contentType: false 
}).done((data) => { 
    //resolve(data); 
}).fail((err) => { 
    //console.log("errorrr for file upload", err); 
    //reject(err); 
});