vue2.0+ElementUI实现上传文件功能
简介:管理后台的table列表,增加上传文件,文件格式不限,文件大小限制为100M,支持拖拽和点击上传文件两种方式,
上传文件需要调用后端接口。
一、效果图,点击导入出现diago弹框
二、代码实现,使用element中的<el-upload/>实现
1.页面实现
<el-upload
class="upload-demo"
:auto-upload="false"
:on-change="uploadChange"
action="string"
:limit="1"
drag
:multiple="false"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">
提示:请上传符合表储存格式的文件,文件超过100M请联系管理员上传
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisible = false">取 消</el-button>
<el-button type="primary" @click="handleAlbumSuccess">确 定</el-button>
</div>
2.联调接口
![](https://img2022.cnblogs.com/blog/2291111/202210/2291111-20221012111333088-584559152.png)
// 限制上传文件大小
uploadChange(file) {
this.fileList = file
// 限制文件上传大小100M
if (file.size / (1024 * 1024) > 100) {
// 限制文件大小
this.$message.error('当前限制文件大小不能大于100M')
return false
}
},
// 确定上传文件
handleAlbumSuccess() {
var form = new FormData()
form.append('file', this.fileList.raw) // 二进流
// 额外参数
form.append('hdfsUrl', this.localtionList)
filesUpload(
form
).then((res) => {
this.$message.success(res.msg)
this.dialogTableVisible = false
}).catch((error) => {
this.$message.error(error.msg)
this.dialogTableVisible = true
})
},
本文来自博客园,作者:danmo_xx,转载请注明原文链接:https://www.cnblogs.com/xx321/p/16783876.html