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>
<!--可添加多个文件并使用表格展示--