Vue 文件上传和“假进度显示“

最新推荐文章于 2024-06-11 10:47:56 发布

原创

最新推荐文章于 2024-06-11 10:47:56 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#django #html

本文介绍如何在Vue中实现文件上传功能，包括设置上传限制、使用http-request获取file对象，以及利用FormData传递额外信息。同时，通过模拟进度条展示假进度，实际进度在后端返回数据时更新至100%。下篇博客将探讨文件下载和真实进度显示。

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

系统中文件上传需要耗费部分时间，本文注重前端Vue怎么编写上传功能和显示假进度

1、Vue部分代码如下：

<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-upload
        ref="upload"
        :action="''"
        :file-list="fileList"
        :http-request="getFile"
        accept=".xlsx"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :before-upload="beforeUpload"
        >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

属性中action设置空，限制上传格式accept，上传限制大小beforeUpload.最重要的是http-request, 用来获取file对象

2、data部分和methods内容