আমি কীভাবে জেএস ফেচ এপিআই দিয়ে একটি ফাইল আপলোড করব?

Question

আমি এখনও তার চারপাশে আমার মাথা গুটিয়ে দেওয়ার চেষ্টা করছি।

আমি ব্যবহারকারীকে ফাইল ইনপুট দিয়ে ফাইলটি (বা একাধিক) নির্বাচন করতে পারি:

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

এবং আমি submitইভেন্টটি ব্যবহার করে ধরতে পারি <fill in your event handler here>। তবে একবার আমি কীভাবে ফাইলটি প্রেরণ করব fetch?

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

Comments

কিছু উত্তর ব্যর্থ করার পরে অফিসিয়াল ডকুমেন্টটি আমার জন্য কাজ করে: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/… , কিছু নিশ্চিত করতে পারে: 1. ফর্মডাটাতে মোড়কের ফাইলের প্রয়োজন; ২. Content-Type: multipart/form-dataঅনুরোধ শিরোনামে ঘোষণার দরকার নেই

— স্পার্ক.বাও

Answer 1

এটি মন্তব্য সহ একটি বেসিক উদাহরণ। uploadফাংশন আপনি যা খুঁজছেন হয়:

// Select your input type file and store it in a variable
const input = document.getElementById('fileinput');

// This will upload the file after having read it
const upload = (file) => {
  fetch('http://www.example.net', { // Your POST endpoint
    method: 'POST',
    headers: {
      // Content-Type may need to be completely **omitted**
      // or you may need something
      "Content-Type": "You will perhaps need to define a content-type here"
    },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );
};

// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);

// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener('change', onSelectFile, false);

Comments

কেন এই উদাহরণে বিষয়বস্তু-টাইপ শিরোলেখ অন্তর্ভুক্ত করা হয়েছে তবে অন্য উত্তরটি ফ্যাচ এপিআই দিয়ে ফাইল পাঠানোর সময় সেগুলি বাদ দিতে বলে? এটা কোনটা?

— jjrabbit

সামগ্রী-প্রকার সেট করবেন না। আমি এটি কার্যকর করার চেষ্টা করে অনেক সময় ব্যয় করেছি এবং তারপরে এই নিবন্ধটি সেট না করার কথা বলেছি। এবং এটি কাজ করে! muffinman.io/uploading-files- using

— m

এক্সপ্রেস ব্যাকএন্ড থেকে আপনি কীভাবে এই ফাইলটি পড়বেন? ফাইলটি ফর্ম ডেটা হিসাবে প্রেরণ করা হয় নি। পরিবর্তে এটি কেবল ফাইল বস্তু হিসাবে প্রেরণ করা হয়। এক্সপ্রেস-ফাইলআপলোড বা মাল্টার কি এই জাতীয় পেডগুলি পার্স করে?

— সাকিব 11

Answer 2

আমি এটি এইভাবে সম্পন্ন করেছি:

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

Comments

FormDataআপনার আপলোড করা সমস্ত ফাইল যদি ফাইল হয় (তবে মূল প্রশ্নটি যা চায়) আপনার যদি কোনও সামগ্রীতে ফাইলের বিষয়বস্তু মোড়ানোর দরকার হয় না । উপরে এটির প্যারামিটার হিসাবে fetchগ্রহণ করবে । input.files[0]body

— ক্লাউস

আপনার যদি ফাইল আপলোড পরিচালনা করতে কোনও পিএইচপি ব্যাকএন্ড থাকে তবে আপনি ফাইলটি একটি ফর্মডাটাতে মোড়াতে চাইবেন যাতে $ _FILES অ্যারেটি সঠিকভাবে পপুলেটে যায়।

— ddelrio1986

আমি আরও লক্ষ্য করেছি যে গুগল ক্রোম কোনও কারণে ফর্মডাটা অংশ ব্যতীত অনুরোধ পেডে ফাইলটি প্রদর্শন করবে না। গুগল ক্রোমের নেটওয়ার্ক প্যানেলে বাগের মতো মনে হচ্ছে।

— ddelrio1986

এটি সত্যই সঠিক উত্তর হওয়া উচিত। অন্য উপায়ে এছাড়াও কাজ করে তবে আরও

— সংশ্লেষিত

/ অবতার বলতে কী বোঝ? আপনি কিছু ব্যাকএন্ড এপিআই শেষ পয়েন্ট উল্লেখ করছেন?

— কার্তিকেয় মিশ্র

Answer 3

ফেচ এপিআই সহ ফাইলগুলি প্রেরণের জন্য একটি গুরুত্বপূর্ণ নোট

content-typeআনার অনুরোধের জন্য একজনকে শিরোনাম বাদ দিতে হবে । তারপরে ব্রাউজারটি স্বয়ংক্রিয়ভাবে Content typeফর্ম সীমানা সহ যা শিরোনাম যোগ করবে

Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD

ফর্ম সীমানা ফর্ম ডেটা জন্য সীমানা

Comments

এই! অনেক গুরুত্বপূর্ণ! মাল্টিপার্টে আনার সাথে আপনার নিজস্ব সামগ্রী-প্রকার ব্যবহার করবেন না। আমার কোড কেন কাজ করে না তা আমার কোনও ধারণা ছিল না।

— আর্নেস্তাস স্ট্যাঙ্কেভিয়াস

আনুন - মাল্টিপার্ট / ফর্ম-ডেটা পোস্টের সীমানা হারিয়েছে

— ব্রেন্ট ব্র্যাডবার্ন

এই তো সোনার! আমি 1 ঘন্টা নষ্ট করেছি এটি বুঝতে না পেরে। এই টিপটি ভাগ করে নেওয়ার জন্য ধন্যবাদ

— অশ্বিন প্রভু

ডাউনভোট কারণ এটি দরকারী তথ্য হলেও এটি ওপির প্রশ্নের উত্তর দেওয়ার চেষ্টা করে না।

— toraritte

এটি খুব গুরুত্বপূর্ণ তথ্য যা MDN আনতে ডক্সে ধরা পড়ে না ।

— প্লাস্টি গ্রোভ

Answer 4

আপনি যদি একাধিক ফাইল চান তবে আপনি এটি ব্যবহার করতে পারেন

var input = document.querySelector('input[type="file"]')

var data = new FormData()
for (const file of input.files) {
  data.append('files',file,file.name)
}

fetch('/avatars', {
  method: 'POST',
  body: data
})

Comments

@ স্যালি ৩৩০১ আমার একই সমস্যা ছিল, কারণ আমার এপিআই ফাংশনটি ফর্মটি ডেটাটি জেএসএনে রূপান্তর করার চেষ্টা করছিল। (আমি কেবল অফ কাউকে

— বলেছিলাম

Answer 5

একটি ফাইল জমা দিতে, আপনি কেবল ব্যবহার করতে পারেন Fileবস্তু থেকে inputএর .filesঅ্যারে সরাসরি এর মান হিসাবে body:আপনার fetch()সূচনাকারী:

const myInput = document.getElementById('my-input');

// Later, perhaps in a form 'submit' handler or the input's 'change' handler:
fetch('https://example.com/some_endpoint', {
  method: 'POST',
  body: myInput.files[0],
});

এটি কাজ করে কারণ Fileউত্তরাধিকার সূত্রে প্রাপ্ত Blob, এবং আনয়ন স্ট্যান্ডার্ডে সংজ্ঞায়িত Blobঅনুমোদিত BodyInitধরণের একটি।

Comments

এটি সহজ উত্তর তবে body: myInput.files[0]ক্লায়েন্টের পাশে মেমরিতে রাখা বাইটের পরিমাণ কীভাবে হয় ?

— ভ্যানটল

আমি আশা করব যে এই সমাধানের সাহায্যে ব্রাউজারটি ফাইলটি প্রবাহিত করার পক্ষে যথেষ্ট বুদ্ধিমান হয়ে উঠবে এবং এটি @ ভ্যান্টলকে মেমোরিতে পড়ার প্রয়োজন পড়বে না, তবে আমি এটি খুঁজে বের করার উপায় থেকে বের হই নি (হয় নিঃসংশ্লিষ্টভাবে বা অনুসন্ধানের মাধ্যমে) অনুমান)। আপনি যদি নিশ্চিত করতে চান, আপনি 50 জিবি ফাইল বা কিছু আপলোড করার জন্য এই পদ্ধতির সাহায্যে (প্রধান ব্রাউজারগুলির প্রতিটিটিতে) চেষ্টা করতে পারেন এবং দেখুন যে আপনার ব্রাউজারটি খুব বেশি স্মৃতি ব্যবহার করার চেষ্টা করে এবং মারা যায়।

— মার্ক আমেরিকা

আমার পক্ষে কাজ করেনি। express-fileuploadঅনুরোধের স্ট্রিমটি বিশ্লেষণ করতে ব্যর্থ। কিন্তু FormDataএকটি কবজ মত কাজ করে।

— অ্যাটমোসিয়ান

@ অ্যাটাকোমিশিয়ান এক নজরে, আমার কাছে দেখে মনে হচ্ছে যে ফাইলগুলি express-fileuploadসম্বলিত multipart/form-dataঅনুরোধগুলি পরিচালনা করার জন্য একটি সার্ভারসাইড গ্রন্থাগার , সুতরাং হ্যাঁ, এটি এই পদ্ধতির সাথে সামঞ্জস্যপূর্ণ নয় (যা কেবল অনুরোধের অংশ হিসাবে ফাইলটি সরাসরি প্রেরণ করে)।

— মার্ক

Answer 6

এখানে গৃহীত উত্তরটি কিছুটা তারিখযুক্ত। 2020 সালের এপ্রিল পর্যন্ত, এমডিএন ওয়েবসাইটে দেখা একটি প্রস্তাবিত পদ্ধতির ব্যবহারের পরামর্শ দেয় FormDataএবং সামগ্রীটির ধরণ সেট করতেও অনুরোধ করে না। https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

আমি সুবিধার জন্য কোড স্নিপেট উদ্ধৃত করছি:

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then((response) => response.json())
.then((result) => {
  console.log('Success:', result);
})
.catch((error) => {
  console.error('Error:', error);
});

Comments

ব্যবহার FormDataশুধুমাত্র যদি সার্ভার ফর্ম তথ্য আশা করছে কাজ করবে। সার্ভার পোস্টের বডি হিসাবে কোনও কাঁচা ফাইল চাইলে গৃহীত উত্তরটি সঠিক।

— ক্লাইড

Answer 7

একাধিক ফাইল ইনপুট উপাদানগুলির জন্য অ্যালেক্স মন্টোয়ার পদ্ধতির থেকে ঝাঁপ দেওয়া

const inputFiles = document.querySelectorAll('input[type="file"]');
const formData = new FormData();

for (const file of inputFiles) {
    formData.append(file.name, file.files[0]);
}

fetch(url, {
    method: 'POST',
    body: formData })

Answer 8

আমার সমস্যা হ'ল আমি ফর্মের ডেটা পপুলেশন করার জন্য একটি রেসপন্স.ব্লোব () ব্যবহার করছিলাম। আপাতদৃষ্টিতে আপনি এগুলি কমপক্ষে দেশীয় প্রতিক্রিয়া দিয়ে করতে পারেন না তাই আমি ব্যবহার শেষ করেছিলাম

data.append('fileData', {
  uri : pickerResponse.uri,
  type: pickerResponse.type,
  name: pickerResponse.fileName
 });

আনয়নটি সেই ফর্ম্যাটটি সনাক্ত করে এবং uri নির্দেশ করছে এমন ফাইলটি প্রেরণে মনে হচ্ছে।

Answer 9

আমার কোডটি এখানে:

এইচটিএমএল:

const upload = (file) => {
    console.log(file);

    

    fetch('http://localhost:8080/files/uploadFile', { 
    method: 'POST',
    // headers: {
    //   //"Content-Disposition": "attachment; name='file'; filename='xml2.txt'",
    //   "Content-Type": "multipart/form-data; boundary=BbC04y " //"multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p" //  ή // multipart/form-data 
    // },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );

  //cvForm.submit();
};

const onSelectFile = () => upload(uploadCvInput.files[0]);

uploadCvInput.addEventListener('change', onSelectFile, false);

<form id="cv_form" style="display: none;"
										enctype="multipart/form-data">
										<input id="uploadCV" type="file" name="file"/>
										<button type="submit" id="upload_btn">upload</button>
</form>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="#" id="upload">UPLOAD CV</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="download">DOWNLOAD CV</a></li>
</ul>

Comments

পর্যালোচনা থেকে: হাই, দয়া করে কেবল উত্স কোড দিয়ে উত্তর দিবেন না। আপনার সমাধান কীভাবে কাজ করে সে সম্পর্কে একটি দুর্দান্ত বর্ণনা দেওয়ার চেষ্টা করুন। দেখুন: আমি কীভাবে ভাল উত্তর লিখব? । ধন্যবাদ

— সানুন ןɐ কিউপি