vue上传文件时显示上传进度

要在Vue中显示文件上传进度,可以使用axios库来处理文件上传,并使用axios的onUploadProgress方法获取上传进度。

首先,确保你已经安装了axios库。可以使用npm或yarn安装,在终端中运行以下命令:

复制代码
npm install axios

或者

复制代码
yarn add axios

接下来,在你的Vue组件中引入axios库,并添加一个处理文件上传的方法。例如,在App.vue组件中:

vue 复制代码
<template>
  <div>
    <input type="file" @change="uploadFile" />
    <p v-if="uploadProgress">上传进度: {{ uploadProgress }}%</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      uploadProgress: 0,
    };
  },
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        onUploadProgress: (progressEvent) => {
          this.uploadProgress = Math.round(
            (progressEvent.loaded / progressEvent.total) * 100
          );
        },
      })
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

上述代码中,我们首先引入了axios库,并在组件的data选项中添加了一个uploadProgress属性,用于存储上传进度。在uploadFile方法中,我们获取到文件对象,并创建一个FormData对象来存储文件数据。然后,我们使用axios库的post方法发送文件上传请求,并传入FormData对象作为请求数据。在请求配置选项中,我们添加了headers选项来设置请求头的Content-Typemultipart/form-data,以支持文件上传。同时,我们使用onUploadProgress方法来监听上传进度事件,并将进度以百分比的形式存储在uploadProgress属性中。最后,我们处理上传成功和失败的回调函数。

在模板中,我们添加了一个文件输入框,当选择一个文件时,会触发uploadFile方法进行文件上传。同时,在模板中我们使用v-if指令来判断是否显示上传进度,如果uploadProgress大于0,则会显示上传进度。

请注意,上述代码中的/upload路径是一个示例,你需要根据你的后端API地址进行相应调整。同时,你需要在后端服务器上处理文件上传请求,将上传的文件保存到服务器或云存储中。具体如何处理文件上传请求,取决于你使用的后端框架和存储解决方案。

相关推荐
海天胜景40 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun2 小时前
Promise 基础使用
前端·javascript·promise
Codebee2 小时前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
邢同学爱折腾3 小时前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron