vue iView 上传组件之手动上传功能

vue iView 上传组件之手动上传功能上传组件之手动上传功能

iView 主要服务于 PC 界面的中后台业务，是一套高质量的开源 UI 组件库。这篇文章主要介绍了iView 上传组件

之手动上传功能,需要的朋友可以参考下

基于 Vue 的 UI 组件库现在已经有很多了，尤其是移动端的。现在又多了一个 iView 。

iView 主要服务于 PC 界面的中后台业务，是一套高质量的开源 UI 组件库，先上地址：

https://github.com/iview/iview

官网是：

https://www.iviewui.com/

最近做一个后台系统用的功能 总结下遇见的问题

功能需求点

上传选择文件 判断文件格式

保存需要上传的文件，展示文件名

提供删除文件功能（未上传前）

上传文件

iView 提供的上传组件

<Upload

multiple

ref="upload"

<div v-for="(item, index) in file">Upload file: {{ item.name }}

<a href="javascript:;" rel="external nofollow" @click="delectFile(item.name)">X</a>

<Button style="margin-left:30px;"

size="small"

v-if="index === 0"


type="primary"

@click="upload"

:loading="loadingStatus">上传</Button>

</div>

上传选择文件上传选择文件 判断文件格式判断文件格式 保存文件保存文件

选择文件后会调用方法，在里面做的事情有 判断文件类型是否满足需求，如果满足就保存到需要上传的文件List里，这里我们

需要自己定义一个keyID,应为是动上传需要展示，删除功能，如果没有唯一ID不知道删除那个

这里如果允许文件上传了不用但心什么，此钩子会把选择的当数组一样需要调用上文件事件前的钩子事件，所以也不能但心多

文件选择只会生成一个KeyID

handleUpload (file) { // 上传文件前的事件钩子

// 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作

let keyID = Math.random().toString().substr(2);