Analisis Vue dan komunikasi sisi pelayan: Cara melaksanakan penyambungan semula titik putus

Anatomi komunikasi antara Vue dan pelayan: Cara melaksanakan penyambungan semula titik putus

Dalam pembangunan bahagian hadapan, Vue.js ialah rangka kerja JavaScript yang sangat popular, yang menyediakan kaedah yang ringan dan mudah digunakan untuk membina interaktif antara muka web. Berkomunikasi dengan pelayan bahagian belakang ialah isu penting yang sering perlu ditangani dalam aplikasi Vue.js.

Artikel ini akan membincangkan cara melaksanakan fungsi resume titik putus dari perspektif komunikasi antara Vue dan pelayan. Muat naik resume titik putus bermakna apabila gangguan yang tidak dijangka berlaku semasa muat naik fail, muat naik boleh disambung semula dari titik putus tanpa dimulakan semula.

Pertama, kita perlu melakukan operasi pemilihan fail dalam Vue. Anda boleh menggunakan API Fail HTML5 untuk melaksanakan fungsi pemilihan fail dengan menetapkan atribut jenis elemen input kepada "fail". Contoh kod adalah seperti berikut:

<template>
  <div>
    <input type="file" @change="handleFileSelect" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleFileSelect(event) {
      // 选择文件的操作
      const file = event.target.files[0];
      // 将文件存储到Vue的data或Vuex中
      this.file = file;
    },
    uploadFile() {
      // 调用上传文件的方法
      this.upload(this.file);
    },
    upload(file) {
      // 实现上传文件的逻辑
      // ...
    }
  }
}
</script>

Semasa proses memuat naik fail, kita perlu melaksanakan fungsi menyambung semula muat naik dari titik putus. Untuk melaksanakan penyambungan semula titik putus, kita perlu memahami prinsip asas muat naik fail. Proses pemindahan fail biasanya membahagikan fail kepada beberapa blok kecil untuk penghantaran Saiz setiap blok kecil boleh dilaraskan mengikut keadaan rangkaian dan konfigurasi pelayan.

Pertama, kita perlu mendapatkan jumlah saiz fail dan saiz yang telah dimuat naik. Kita boleh menggunakan atribut size属性和一些XHR对象的responseText dalam API Fail HTML5 untuk mendapatkannya. Contoh kod adalah seperti berikut:

upload(file) {
  const chunkSize = 1024 * 1024;
  const totalSize = file.size;
  let loadedSize = 0;

  const readFile = (file, start, end) => {
    const reader = new FileReader();
    const blob = file.slice(start, end);
    reader.onload = (event) => {
      const chunk = event.target.result;

      // 将chunk发送到服务端
      // ...

      loadedSize += chunk.byteLength;

      if (loadedSize < totalSize) {
        const start = loadedSize;
        const end = Math.min(start + chunkSize, totalSize);
        readFile(file, start, end);
      }
    };

    reader.readAsArrayBuffer(blob);
  };

  readFile(file, 0, chunkSize);
}

Di bahagian pelayan, kita perlu menerima dan menyimpan ketulan kecil fail, dan merekodkan ketulan kecil yang diterima untuk mencapai fungsi menyambung semula muat naik. Cara biasa ialah menggunakan pangkalan data cache seperti Redis untuk merekodkan ketulan kecil yang telah dimuat naik. Contoh kod adalah seperti berikut:

app.post('/upload', (req, res) => {
  const { chunkNumber, totalChunks } = req.body;
  const file = req.files.file;

  const redisKey = `file:${file.filename}`;

  // 将小块存储到Redis中
  redisClient.hset(redisKey, chunkNumber, file.data, (err) => {
    if (err) {
      res.status(500).send('Internal Server Error');
      return;
    }

    const chunks = Array.from({ length: totalChunks }, (_, i) => i + 1);
    const pendingChunks = chunks.filter((chunk) => !redisClient.hexists(redisKey, chunk));

    if (pendingChunks.length === 0) {
      // 所有小块已上传完毕，开始合并小块
      mergeChunks(redisKey, file.filename);

      res.status(200).send('OK');
    } else {
      res.status(206).send('Partial Content');
    }
  });
});

Akhir sekali, kami perlu mengendalikan penyambungan semula muat naik semasa proses muat naik dalam Vue. Kami boleh menggunakan objek XHR atau perpustakaan pihak ketiga seperti Axios untuk menghantar potongan kecil ke pelayan. Contoh kod adalah seperti berikut:

upload(file) {
  const chunkSize = 1024 * 1024;
  const totalSize = file.size;
  let loadedSize = 0;

  const uploadChunk = (file, start, end) => {
    const chunk = file.slice(start, end);
    const formData = new FormData();
    formData.append('chunkNumber', Math.ceil(start / chunkSize) + 1);
    formData.append('totalChunks', Math.ceil(totalSize / chunkSize));
    formData.append('file', chunk);

    axios.post('/upload', formData)
      .then((response) => {
        const status = response.status;
        if (status === 200) {
          // 上传完成，可以进行其他操作
          // ...
        } else if (status === 206) {
          loadedSize = end;
          const start = loadedSize;
          const end = Math.min(start + chunkSize, totalSize);
          uploadChunk(file, start, end);
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

  uploadChunk(file, 0, chunkSize);
}

Melalui contoh kod di atas, kami boleh melaksanakan muat naik fail dalam Vue dan menyokong fungsi resume titik putus. Dalam aplikasi praktikal, beberapa pengoptimuman juga boleh dibuat, seperti memaparkan kemajuan muat naik, menambah mekanisme cuba semula, dsb.

Ringkasnya, tidak rumit untuk melaksanakan fungsi resume titik putus melalui komunikasi antara Vue dan pelayan. Kami hanya perlu menguasai prinsip asas muat naik fail, dan kemudian membahagikan, menghantar dan merekodkan blok kecil untuk mencapai fungsi muat naik resume, yang meningkatkan pengalaman pengguna dan kestabilan pemindahan fail.

Atas ialah kandungan terperinci Analisis Vue dan komunikasi sisi pelayan: Cara melaksanakan penyambungan semula titik putus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!