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