JavaScript failu lejupielādes problēmu risināšana no ESP32 tīmekļa servera

Izpratne par JavaScript failu lejupielādes problēmām ar ESP32

Failu lejupielāde no tīmekļa servera dažkārt var būt sarežģīta, it īpaši, ja strādājat ar tādiem mikrokontrolleriem kā ESP32. Mēģinot lejupielādēt failu, izmantojot JavaScript, var būt gadījumi, kad lejupielāde darbojas nevainojami, ja tai piekļūst tieši no pārlūkprogrammas, bet neizdodas, ja to palaiž ar skriptu.

Šajā scenārijā ESP32 apkalpo statisku .CSV failu, izmantojot PsychicHTTP tīmekļa serveri. Problēma rodas, ja fails netiek lejupielādēts, izmantojot JavaScript, lai gan tam var piekļūt, izmantojot tiešu HTML saiti pārlūkprogrammā. Šī problēma var būt nomākta, taču tā ir izplatīta problēma, ar kuru saskaras, strādājot ar iegultajām sistēmām.

JavaScript kods izmanto XMLHttpRequest, lai pieprasītu failu no ESP32, taču tas neaktivizē lejupielādi, kā paredzēts. Šajā rakstā tiks noskaidrots, kāpēc tiešā saite darbojas, bet JavaScript metode nedarbojas. Tas arī sniegs ieskatu par to, kā modificēt JavaScript, izmantojot modernāku “ieneses” API, lai atrisinātu šo problēmu.

Turklāt mēs apspriedīsim, vai ir nepieciešamas izmaiņas ESP32 kodā, pārejot no XMLHttpRequest uz ielādes API. Izpētot šos divus jautājumus, mēs atklāsim pamatā esošo problēmu un sniegsim risinājumus uzticamai failu lejupielādei.

JavaScript failu lejupielādes metožu un risinājumu analīze

Piedāvātajos piemēros mērķis bija lejupielādēt CSV failu no ESP32 tīmekļa servera, kurā darbojas PsychicHTTP. Pirmais skripts izmanto moderno Ienest API, spēcīgs rīks HTTP pieprasījumu veikšanai JavaScript. Šī metode vienkāršo procesu, apstrādājot solījumus, un ir labāk lasāma nekā vecākas metodes, piemēram, XMLHttpRequest. Ieneses pieprasījums nosūta GET pieprasījumu uz ESP32, izgūst failu un pēc tam pārvērš to par lāse formātā, kas ir būtisks bināro datu, piemēram, CSV failu, apstrādei. Pēc tam tiek ģenerēts pagaidu URL, lai lietotājs varētu lejupielādēt failu, izmantojot enkura tagu.

Otrais skripts ir alternatīva, izmantojot XMLHttpRequest, kas ir tradicionālāks HTTP pieprasījumu veikšanas veids. Lai gan XMLHttpRequest ir vecāks, tas joprojām tiek izmantots daudzās lietojumprogrammās. Šajā piemērā atbildes veids ir iestatīts uz “blob”, lai apstrādātu bināro failu, ko atgriež serveris. Skripts klausās atbildi, un pēc veiksmīgas atgriešanās tas dinamiski izveido enkura elementu, lai aktivizētu lejupielādi. Šī metode nodrošina detalizētāku kontroli pār pieprasījumu, taču tai trūkst Fetch API vienkāršības un elastības, it īpaši apstrādājot solījumus.

Trešais risinājums ir rezerves variants, kuram vispār nav nepieciešams JavaScript. Tas izmanto HTML enkura tagu ar lejupielādēt atribūts, ļaujot lietotājiem noklikšķināt uz saites un automātiski lejupielādēt failu. Šis ir visvienkāršākais risinājums, un tam nav nepieciešami nekādi skripti. Tomēr tas ir mazāk elastīgs, jo tas neļauj programmatiski apstrādāt failu lejupielādes vai pievienot nosacījumus vai loģiku pirms lejupielādes aktivizēšanas.

Katrs no šiem risinājumiem attiecas uz atšķirīgu lietošanas gadījumu. Fetch API ir ieteicamais risinājums mūsdienu lietojumprogrammām tās vienkāršības un veiktspējas dēļ. XMLHttpRequest ir noderīgs, ja nepieciešama lielāka kontrole pār pieprasījumu un atbildi. Visbeidzot, tikai HTML risinājums ir ideāli piemērots statiskām vai vienkāršām tīmekļa lapām, kur JavaScript nav nepieciešams. Ieviešot kādu no šīm metodēm, jūs varat nodrošināt uzticamu failu lejupielādi no ESP32 tīmekļa servera, uzlabojot gan lietotāja pieredzi, gan funkcionalitāti.

function downloadFile(url, fileName) {
  fetch(url, { method: 'GET', mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      const aElement = document.createElement('a');
      const objectUrl = URL.createObjectURL(blob);
      aElement.href = objectUrl;
      aElement.download = fileName;
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(objectUrl);
      document.body.removeChild(aElement);
    })
    .catch(error => console.error('Fetch error:', error));
}
downloadFile('http://192.168.0.136/saveFile', 'sample.csv');

function saveFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/saveFile', true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (xhr.status === 200) {
      var blob = xhr.response;
      var aElement = document.createElement('a');
      var url = URL.createObjectURL(blob);
      aElement.href = url;
      aElement.download = 'sample.csv';
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(url);
      document.body.removeChild(aElement);
    }
  };
  xhr.send();
}

<a href="http://192.168.0.136/saveFile" download="sample.csv">Download CSV</a>

describe('Download File Test', function() {
  it('should successfully download a file using fetch', function(done) {
    const url = 'http://192.168.0.136/saveFile';
    fetch(url, { method: 'GET' })
      .then(response => {
        expect(response.ok).toBe(true);
        return response.blob();
      })
      .then(blob => {
        expect(blob.size).toBeGreaterThan(0);
        done();
      })
      .catch(done.fail);
  });
});

JavaScript un HTML failu lejupielādes metožu atšķirību izpēte

Lejupielādējot failus, izmantojot JavaScript, ir svarīgi saprast, kā dažādas metodes mijiedarbojas ar pārlūkprogrammas drošības politikām. Viens no iemesliem, kāpēc darbojas tiešā adreses joslas saite, ir tas, ka pārlūkprogramma var nekavējoties atrisināt pieprasījumu un apstrādāt lejupielādi. Tomēr, mēģinot to izdarīt, izmantojot JavaScript, pārlūkprogrammas piemēro stingrākus noteikumus, piemēram, pieprasa pareizu CORS (Cross-Origin Resource Sharing) iestatījumi. Bez iestatījuma no-cors vai cors pareizi, lejupielāde var nenotikt.

Turklāt mūsdienu pārlūkprogrammas dod priekšroku fetch() API salīdzinājumā ar vecākām metodēm, piemēram, XMLHttpRequest, jo tas nodrošina lielāku kontroli pār to, kā tiek apstrādātas atbildes, jo īpaši attiecībā uz lāse vai failiem līdzīgi objekti. Tas arī graciozāk apstrādā kļūdas, padarot to par uzticamāku risinājumu dinamiskai failu lejupielādei. Pareizu MIME veidu iestatīšana ir vēl viens svarīgs faktors, lai nodrošinātu, ka klients pareizi apstrādā failu.

Lietojumprogrammām, piemēram, lejupielādei no ESP32, ir ļoti svarīgi nodrošināt, lai serveris pareizi apstrādā pieprasījumus un atbildes, apkalpojot pareizos MIME veidus un galvenes. Fetch API nodrošina arī labāku solījumu apstrādi, kas ir īpaši noderīgi asinhronās vidēs, piemēram, failu lejupielādēšanā, nodrošinot vienmērīgu un atsaucīgu lietotāja pieredzi.