Cara menggunakan API Ambil untuk memuat naik data rentetan sebagai fail JSON ke titik akhir data borang yang anda mahu tunjuk ke fail setempat

Question

Saya mahu mengemas kini fail Json yang dihoskan menggunakan API pada CDN pihak ketiga. Dalam dokumentasi mereka, mereka memberikan contoh menggunakan cURL untuk mencapai ini. Permintaan cURL yang betul hendaklah seperti ini:

curl -X LETAK 'https://endpoint.url.here'
  -H 'x-auth-token: <token>'
  -F 'file=@"path/to/your/file"'

Sekarang saya sedang membina halaman React di mana anda memasukkan teks Json ke dalam medan teks dan sebaik sahaja butang ditekan saya mahu mensimulasikan mempunyai laluan ke fail json supaya ia boleh dimasukkan ke dalam permintaan ini.

Saya pada asasnya mempunyai dua soalan:

1. Saya dihadkan daripada menggunakan API Ambil, bagaimanakah saya boleh membina permintaan Ambil untuk mencerminkan permintaan cURL contoh dengan betul?

2. Bagaimanakah cara saya menukar rentetan dalam medan teks kepada laluan fail (sebaik-baiknya berakhir dengan nama fail) supaya titik akhir menerimanya?

Saya cuba menukar data fail kepada Blob dan menggunakan URL objek sebagai laluan seperti ini:

const file = new Blob([jsonText], {type: 'text/plain'});
var blobURL = URL.createObjectURL(file);

Saya juga cuba menggunakan FormData untuk menyediakan permintaan saya:

let formData = new FormData();
formData.append('fail', blobURL);

biarkan tajuk = {
        'x-auth-token': '<token>',
        'Jenis-Kandungan': 'berbilang bahagian/data-bentuk'
    }

biarkan muatan = {
        kaedah: 'LETAK',
        tajuk: tajuk,
        badan: formData
    }

fetch('https://endpoint.url.here', muatan) ...

Apabila saya cuba melakukan ini, bahagian belakang hanya membalas dengan beberapa ralat seperti "Fail tidak disediakan" dan saya mengesyaki permintaan saya tidak memenuhi keperluan. Adakah terdapat cara yang lebih baik untuk mencapai ini? Adakah anda mempunyai sebarang cadangan yang boleh saya cuba untuk memadankan permintaan sampel mereka dengan lebih baik?

Answer 1

Ya, saya berjaya menyelesaikan masalah saya. Pengubahsuaian kecil ini adalah kunci:

const jsonBlob = new Blob(['<jsonText>'], {type: 'application/json'});

let formData = new FormData();
formData.append('file', jsonBlob, 'filename.json');

const headers = new Headers();
headers.append('x-auth-token', '<token>');

let payload = {
    method: 'PUT',
    headers: headers,
    body: formData
}

fetch('https://endpoint.url.here', payload) ...

Semuanya berjalan hebat sekarang!