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

最新推荐文章于 2025-05-05 16:51:36 发布

&ACE&

最新推荐文章于 2025-05-05 16:51:36 发布

阅读量1.6k

点赞数 10

文章标签： vue.js arcgis javascript

本文链接：https://blog.youkuaiyun.com/weixin_59525879/article/details/135513338

版权

本文介绍了如何在Vue应用中使用axios库处理文件上传，通过onUploadProgress方法实时显示上传进度，并提供了相关代码示例和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

npm install axios

或者

yarn add axios

接下来，在你的Vue组件中引入axios库，并添加一个处理文件上传的方法。例如，在App.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',