断点续传是一种文件上传技术，允许在文件上传过程中发生中断时，从上次上传的位置继续上传，而不是重新开始。下面是一个使用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()处理文件上传的成功和失败情况。
