Analysis of Vue and server-side communication: How to implement breakpoint resuming

Analysis of communication between Vue and the server: How to implement breakpoint resumption

In front-end development, Vue.js is a very popular JavaScript framework that provides It provides a lightweight, easy-to-use way to build interactive web interfaces. Communicating with the backend server is an important issue that often needs to be dealt with in Vue.js applications.

This article will discuss how to implement the breakpoint resume function from the perspective of communication between Vue and the server. Breakpoint resume upload means that when an unexpected interruption occurs during file upload, the upload can be resumed from the breakpoint without restarting.

First, we need to perform file selection operations in Vue. You can use the File API of HTML5 to implement the file selection function by setting the type attribute of the input element to "file". The code example is as follows:

<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>

During the process of uploading files, we need to implement the function of resuming the upload from a breakpoint. In order to implement breakpoint resumption, we need to understand the basic principles of file upload. The process of file transfer is usually to divide the file into multiple small blocks for transmission. The size of each small block can be adjusted according to the network conditions and server configuration.

First, we need to get the total size of the file and the uploaded size. We can obtain it using the size attribute in the HTML5 File API and the responseText attribute of some XHR objects. The code example is as follows:

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);
}

On the server side, we need to receive and save small blocks of the file, and record the received small blocks to achieve the function of resuming the download. A common way is to use a cache database such as Redis to record the small chunks that have been uploaded. The code example is as follows:

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');
    }
  });
});

Finally, we need to handle the resumption of upload during the upload process in Vue. We can use XHR objects or third-party libraries such as Axios to send small chunks to the server. The code example is as follows:

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);
}

Through the above code example, we can implement file upload in Vue and support the breakpoint resume function. In practical applications, some optimizations can also be made, such as displaying upload progress, adding a retry mechanism, etc.

To sum up, it is not complicated to implement the breakpoint resume function through communication between Vue and the server. We only need to master the basic principles of file upload, and then divide, transmit and record small blocks to achieve the resume upload function, which greatly improves the user experience and the stability of file transfer.

The above is the detailed content of Analysis of Vue and server-side communication: How to implement breakpoint resuming. For more information, please follow other related articles on the PHP Chinese website!