Bagaimana untuk memuat naik fail dan menukar pengekodan fail dalam Vue

Dengan pembangunan berterusan teknologi hadapan, semakin banyak tapak web menggunakan rangka kerja Vue untuk pembangunan. Dalam Vue, selalunya perlu untuk melaksanakan fungsi muat naik fail. Walau bagaimanapun, jika fail yang dimuat naik mempunyai masalah pengekodan, ia akan menjejaskan kebolehbacaan dan kebolehkendalian fail dengan serius. Artikel ini akan memperkenalkan cara memuat naik fail dan menukar pengekodan fail dalam Vue.

1. Pengetahuan asas memuat naik fail

Dalam model pembangunan di mana bahagian hadapan dan belakang dipisahkan, bahagian hadapan perlu memuat naik fail ke bahagian belakang melalui antara muka. Terdapat dua kaedah muat naik biasa:

1 Muat naik Borang

Serahkan fail ke pelayan melalui borang HTML Operasi bahagian hadapan adalah sangat mudah Itu sahaja. Walau bagaimanapun, kaedah ini akan menyebabkan halaman dimuat semula, yang tidak mesra.

2. Gunakan ajax untuk memuat naik

Serahkan fail ke pelayan secara tidak segerak melalui ajax Memandangkan ia tidak menyebabkan halaman dimuat semula, kesannya adalah lebih baik. Pada masa yang sama, apabila memuat naik fail melalui ajax, fungsi bar kemajuan boleh dilaksanakan untuk meningkatkan pengalaman interaktif pengguna.

2. Pengekodan Fail

Apabila memuat naik fail, kami sering menghadapi masalah pengekodan fail, mengakibatkan fail tidak boleh dibaca atau dihuraikan. Oleh itu, fail yang dimuat naik perlu dikodkan.

Terdapat dua kaedah pengekodan fail biasa:

1. Fail binari

Dengan menghantar fail sebagai strim binari, anda boleh mengelakkan masalah yang disebabkan oleh pengekodan fail. Walau bagaimanapun, kaedah ini menggunakan lebih lebar jalur dan mempunyai kelajuan muat naik yang lebih perlahan.

2. Fail teks

Dengan menukar fail ke format pengekodan Base64 untuk penghantaran, anda boleh mengelakkan masalah pengekodan fail dan memudahkan penghantaran data antara klien dan pelayan. Walau bagaimanapun, saiz fail yang dipindahkan dengan cara ini agak besar, dan pengekodan dan penyahkodan Base64 juga menggunakan masa dan lebar jalur.

3. Muat naik fail dan tukar pengekodan

Dalam Vue, anda boleh memuat naik fail melalui pemalam sumber Vue. Apabila menggunakan Vue-resource untuk memuat naik fail, fail perlu dikodkan untuk mengelakkan masalah yang disebabkan oleh pengekodan fail. Kodnya adalah seperti berikut:

uploadFile(file) {
      const formData = new FormData();
      //将上传的文件进行base64编码
      formData.append("file", window.btoa(file));
      //上传文件
      this.$http
        .post("/api/upload", formData)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    }

Dalam kod di atas, fail Base64 dikodkan melalui kaedah window.btoa, dan fail yang dikodkan dimasukkan ke dalam FormData. Kemudian, muat naik FormData ke pelayan melalui permintaan POST. Selepas pelayan menerima data, ia juga perlu menyahkod data Kod adalah seperti berikut:

const file = req.body.file;
//将上传的文件进行Base64解码
const result = window.atob(file);

Dengan kod di atas, fail yang dimuat naik boleh dipindahkan dengan mudah antara klien dan pelayan selepas berada. dikodkan dan dinyahkod untuk penghantaran data dan mengelakkan masalah yang disebabkan oleh pengekodan fail.

4. Ringkasan

Memuat naik fail dan menukar pengekodan dalam Vue boleh dicapai melalui pemalam sumber Vue. Pengekodan diperlukan semasa memuat naik fail untuk mengelakkan masalah yang disebabkan oleh pengekodan fail. Pada masa yang sama, selepas pelayan menerima data, ia juga perlu menyahkod data. Melalui kod di atas, muat naik fail dan pemprosesan pengekodan boleh direalisasikan dengan mudah, meningkatkan pengalaman pengguna dan kecekapan operasi.

Atas ialah kandungan terperinci Bagaimana untuk memuat naik fail dan menukar pengekodan fail dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!