Cara menulis kod untuk muat naik kumpulan vue

Dalam beberapa tahun kebelakangan ini, rangka kerja bahagian hadapan telah menjadi alat pilihan bagi kebanyakan pembangun bahagian hadapan, antaranya vue.js digemari oleh pembangun kerana keluk pembelajarannya yang mudah dan penyelenggaraan yang mudah. Dalam vue.js, melaksanakan fungsi muat naik fail adalah salah satu keperluan yang sangat biasa, dan muat naik kelompok digunakan oleh pelbagai tapak web. Jadi bagaimana untuk melaksanakan muat naik kelompok dalam vue.js? Perkara berikut akan memperkenalkan secara terperinci cara vue.js melaksanakan muat naik kelompok.

1. Muat naik fail ringkas

Sebelum memperkenalkan muat naik kelompok, mari kita lihat pelaksanaan muat naik fail tunggal yang ringkas dalam vue.js. Andaikan bahawa fail yang ingin kami muat naik adalah seperti berikut:

<input type="file" @change="handleFileUpload"/>

Tambah fungsi handleFileUpload dalam kaedah vue.js untuk mengendalikan muat naik fail:

handleFileUpload() {
  const file = event.target.files[0]; //获取文件对象
  const formData = new FormData(); //建立FormData对象
  formData.append('file', file); //将文件添加到FormData中
  axios.post('/file/upload', formData)//使用axios发送post请求上传文件
       .then(response => {
        console.log(response);//上传成功后的响应结果
       })
}

Dalam kod ini, kami menggunakan axios perpustakaan untuk Hantar permintaan siaran untuk memuat naik fail, tetapi ini juga boleh dicapai menggunakan mana-mana perpustakaan lain atau ajax asli. Sudah tentu, dalam projek sebenar, kami mungkin perlu menggunakan Token Pengesahan atau Token CSRF untuk memastikan keselamatan.

2. Muat naik berbilang fail

Selepas memahami muat naik fail tunggal, mari perkenalkan kaedah vue.js untuk melaksanakan muat naik berbilang fail. Tambah input fail berbilang pilih dalam html:

<input type="file" ref="fileInput" @change="handleMultipleFileUpload" multiple>

Kemudian tambahkan fungsi handleMultipleFileUpload dalam kaedah:

handleMultipleFileUpload() {
  const files = this.$refs.fileInput.files;//获取上传的文件对象
  const formData = new FormData();//建立FormData对象
  for(let i=0 ;i<files.length ;i++){
    formData.append('files', files[i]);//将文件添加到FormData对象中
  }
  axios.post('/file/multiple_upload', formData)//发送post请求上传多个文件
       .then(response => {
         console.log(response);//上传成功后的响应结果
       })
}

Melalui kod ini, kami boleh memuat naik berbilang fail, tidak seperti satu fail, kami perlukan untuk Menambah fail pada objek formData dalam urutan. Saya percaya anda sudah boleh memahami cara memuat naik berbilang fail dalam vue.js.

3. Laksanakan muat naik berbilang fail dengan bar kemajuan

Walau bagaimanapun, fungsi muat naik berbilang fail di atas perlu diperluaskan lagi. Sebagai contoh, jika kita ingin memaparkan bar kemajuan muat naik, daripada mengetahui status muat naik hanya selepas muat naik berjaya, kita perlu menggunakan objek XMLHttpRequest untuk melaksanakan bar kemajuan muat naik. Kodnya adalah seperti berikut:

handleMultipleFileUpload() {
    const files = this.$refs.fileInput.files;//获取上传的文件对象
    const formData = new FormData(); //建立FormData对象
    for(let i=0 ;i<files.length ;i++){
      formData.append('files', files[i]); //将文件添加到FormData对象中
    }
    const xhr = new XMLHttpRequest();//创建XMLHttpRequest对象实现进度条
    //upload.addEventListener用于上传进度监听
    xhr.upload.addEventListener("progress", function(evt){
      if(evt.lengthComputable){
        const percentComplete = Math.round(evt.loaded * 100 / evt.total);//计算上传进度
        console.log(`上传进度：${percentComplete}%`);
      }
    }, false);
    //ajax完成后触发的事件
    xhr.onreadystatechange=function(evt){
      if(xhr.readyState===4){//上传完成
        console.log(xhr.responseText);//上传完成后的响应结果
      }
    }
    //发送post请求上传文件
    xhr.open("POST", "/file/multiple_upload");
    xhr.send(formData);
  }

Malah, apabila kami memuat naik fail khas seperti media penstriman dan sejumlah besar fail, kaedah muat naik di atas mungkin terhad. Oleh itu, adalah sangat perlu untuk memahami jenis fail yang dimuat naik, sekatan saiz fail, kelajuan rangkaian, keperluan pengguna, dsb., dan memilih kaedah muat naik yang sepadan.

Ringkasnya, artikel ini memperkenalkan kaedah vue.js untuk melaksanakan muat naik fail tunggal dan muat naik berbilang fail, dan menyedari kesan bar kemajuan muat naik melalui objek XMLHttpRequest. Saya percaya kaedah ini boleh membantu anda melengkapkan fungsi muat naik fail dengan lebih baik. Pada masa yang sama, dalam projek sebenar, adalah perlu juga untuk mempertimbangkan cara pelayan bahagian belakang mengendalikan fail yang dimuat naik dan cara mencegah kebocoran fail dan gangguan data serta isu berkaitan lain.

Atas ialah kandungan terperinci Cara menulis kod untuk muat naik kumpulan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!