vue+iview+ajax实现多文件上传并显示进度条

最新推荐文章于 2022-11-16 15:20:31 发布

原创

最新推荐文章于 2022-11-16 15:20:31 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript

本文介绍了如何使用vue、iview和ajax在系统中替换Flash实现文件上传功能，详细展示了上传界面、上传成功状态，并提供了CDN引入资源的方法、界面样式设置以及前端代码示例，特别强调了vue实例中this的正确指向和实时上传进度的处理。

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

vue+iview+ajax实现上传功能（i-table表格呈现和i-circle进度环显示）

前言

系统之前的上传功能使用的是SWFUpload做的，但因为Adobe在2020年12月31日之后停止支持Flash Player，并从2021年1月12日开始阻止Flash内容在Flash Player中运行，故根据原来需求改成使用iview来做。

实现效果展示

上传界面:

在这里插入图片描述

上传成功:
在这里插入图片描述

准备工作

在页面上CDN引入js和css文件。

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>

这是引入指向外部站点，最好是将这几个文件下载下来保存在本地站点，直接对站点内容进行引入比较好，避免端口限制无法访问。

可参考下载文件路径：
vue.min.js
iview.css
iview.min.js

界面样式

<div id="app" >
         <!--[if (lt IE 9)|(IE 9)]>
         	<p style="font-size:40px;" class="center-in-center"> 
         		请使用谷歌或者 IE 10 及以上版本
         	</p>
         <![endif]-->
         <!--[if (gte IE 10)|(! IE)]>-->
         <!--提交后遮罩-->
        <div class="mask1" v-if="upload.fileProgressShow">
          <div class="mask2">
            <!--上传进度环-->
            <i-circle :percent="upload.fileProgress" dashboard style="position:relative;">
                 <span  class="demo-circle-inner" style="font-size:24px;color:white;">{
   
   {
   
    upload.fileProgress }}%</span>
            </i-circle>
         <i-button v-if="upload.closeButtonShow" type="default" @click="exit" ghost style="position:relative;left:-90px;top:30px;">关闭</i-button>
         </div>
         <div  class="mask">
          </div>
        </div>
        <div>
        <Upload type="drag" multiple ref="upload" :before-upload="handleUpload">
         <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <!-- <p>Click or drag files here to upload</p> -->
            <p>单击或拖动文件至此处进行上传</p>
        </div>
        </Upload>
        <div>
        <!--可添加多个文件并使用表格展示-->
        <i-table border height="233