vue+elementui 实现上传文件/导入文件的功能示例详解
作者：最初@
文章介绍了如何使用Vue和Element UI实现上传文件和导入文件的功能,主要内容包括：上传组件的使用、data中的数据存储、methods中的方法（选择文件、点击确定上传文件、删除文件）,文章还提供了相关链接供进一步学习,感兴趣的朋友一起看看吧
vue+elementui 实现上传文件/导入文件的功能
1. 上传组件
<el-form-item label="上传文件：">
<el-upload
action=""
:file-list="fileList"
:show-file-list="false"
:http-request="handUpLoad"
drag
:limit="1"
:accept="'.xls, .xlsx'"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<ul class="downloadFile">
<li v-for="(val, index) in fileList" :key="index">
<a class="el-upload-list__item-name" href="javascript:;" rel="external nofollow" ><i class="el-icon-document" />{{ val.fileName }}</a>
<i class="el-icon-close" @click="handleFileRemove(val)" />
</li>
<li v-show="fileLoading"><i class="loading el-icon-loading" /> </li>
</ul>
</el-form-item>2. data中的数据
data() {
return {
fileList: [],
fileLoading: false,
fileobj: ''
}
}3. methods中的方法
① 选择文件
handUpLoad(fileobj) {
this.fileobj = fileobj
this.fileList = [{
fileName: fileobj.file.name,
fileSize: fileobj.file.size
}]
}② 点击确定，调用接口上传文件
submit() {
if (this.fileList.length === 0) {
this.$message({
message: '请先上传文件',
type: 'warning'
})
return
}
const param = new FormData()
param.append('file', this.fileobj.file)
// 调用上传文件的方法--fileImport
fileImport(param).then(res => {
this.$message({
type: 'success',
message: '上传成功'
})
}).catch(err => {
this.$message.error(err)
}).finally(() => {
this.$emit('refresh')
})
}③ 删除文件
handleFileRemove() {
this.fileList = []
}到此这篇关于vue+elementui 实现上传文件/导入文件的功能的文章就介绍到这了,更多相关vue elementui 上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！