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

简介: 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中定义了selectedFileuploadPercentageuploadUrl等数据属性。selectedFile用于存储用户选择的文件,uploadPercentage用于显示已上传的百分比,uploadUrl是服务器端上传文件的URL。

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

相关文章
|
1天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
54 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
2天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
4天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
13 3
|
4天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
18 2
|
4天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
13 2
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
11 2