vue写一个断点续传上传文件代码

断点续传是一种文件上传技术，允许在文件上传过程中发生中断时，从上次上传的位置继续上传，而不是重新开始。下面是一个使用Vue和axios实现断点续传的示例代码：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="startUpload">上传文件</button>
    <div v-if="uploadPercentage">
      <p>已上传：{{ uploadPercentage }}%</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null,
      uploadPercentage: 0,
      uploadUrl: '/upload', // 服务器端上传文件的URL
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    startUpload() {
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      const uploadTask = axios.create().upload.multipart(this.uploadUrl, formData, {
        headers: {
          'Content-Range': `bytes ${this.uploadPercentage}/${this.selectedFile.size}`, // 设置断点续传的Content-Range头部信息
        },
        onUploadProgress: (progressEvent) => {
          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          this.uploadPercentage = percentCompleted;
        },
      });
      uploadTask.then(() => {
        console.log('文件上传成功');
      }).catch((error) => {
        console.error('文件上传失败:', error);
      });
    },
  },
};
</script>

在上面的代码中，我们首先在data中定义了selectedFile、uploadPercentage和uploadUrl等数据属性。selectedFile用于存储用户选择的文件，uploadPercentage用于显示已上传的百分比，uploadUrl是服务器端上传文件的URL。

然后，在methods中定义了handleFileUpload和startUpload方法。handleFileUpload方法用于获取用户选择的文件，并将其存储在selectedFile属性中。startUpload方法用于开始文件上传。我们使用axios库创建一个axios实例，并使用其upload.multipart方法发送POST请求进行文件上传。在请求的配置中，我们设置了断点续传的Content-Range头部信息，以便服务器能够识别已上传的字节数。我们还使用了onUploadProgress回调函数来更新已上传的百分比。最后，我们使用.then()和.catch()处理文件上传的成功和失败情况。