上传前：
回显：可以删除 
最近做了一个后台管理系统使用的是 Ant Design和vue框架搭建的
文件上传：组件: Ant Design https://1x.antdv.com/components/upload-cn/ (upload 官方文档)
功能需求：1.可以拖拽，或者点击上传文件 2.只能上传单个文件，不能上传多个文件。3.导入文件只能是 xls、xlsx格式 4.文件大小不能超过10M 5.点击取消，如果当前有文件正在上传，提示 用户，没有的话，关闭弹窗
具体思路：1.点击文件上传之前判断文件的格式/大小符合条件展示，不符合条件提示用户。2.点击确定时，判断文件是否存在，后端需要接受的参数是 formData数据，对文件进行处理。调用接 口，成功后，更新数据，不成功，提示用户。3.点击取消，如果当前有文件正在上传，提示用户，没有的话，关闭弹窗
注意事项：1.因为antd upload 上传多个文件自带remove 回调函数，但是如果fileList 只有一个文件时，需要自己调用remove 回调函数，否则，上传文件后的删除按钮失效。
2.因为我的需求是只能上传一个文件，所以在上传文件之前，不仅要判断格式，还要限制fileList中只能有一个数据，那么也就是后传的文件，要覆盖先传的文件。
3.因为是我自己封装的组件，需要注意父子组件传递数据的问题~~~~~
接下来上代码。
HTML部分
<template>
<div class="dialog">
<a-modal :visible="visible1" :confirmLoading="loading1" width="20%" :title="title1 === 'batch' ? '推广' : ''" centered
@cancel="() => { $emit('cancelBatch',fileList) }" @ok="() => { $emit('okBatch', fileList) }">
<div>
<span style="margin-right: 20px; margin-bottom: 10px;display: inline-block;">导入模板</span>
<a :href='template' @click="downLoad">下载</a>
</div>
<a-upload-dragger name="file" :before-upload="handleBeforeUpload" :file-list="fileList" :remove="handleTableRemove">
<p class="ant-upload-drag-icon">
<a-icon type="inbox" />
</p>
<p class="ant-upload-text">
点击或将文件拖拽到这里上传
</p>
<p class="ant-upload-hint">
支持扩展名：.xlsx .xls
</p>
</a-upload-dragger>
</a-modal>
</div>
</template>Script部分
//删除icon
handleTableRemove: function (file) {
const index = this.fileList.indexOf(file);
const newFileList = this.fileList
newFileList.splice(index, 1);
this.fileList = newFileList;
},
handleBeforeUpload: function (file, fileList) {
this.file = file
console.log(file, fileList);
//判断文件大小
const isLt10M = file.size / 1024 / 1024 < 10
if (!isLt10M) {
this.$message.error(file.name + '文件大小超出限制，请修改后重新上传')
return false
}
//判断上传文件格式
let extension = file.name.split('.')[1] === 'xls';
let extension2 = file.name.split('.')[1] === 'xlsx';
if (!extension && !extension2) {
this.$message.warning('导入文件只能是 xls、xlsx格式!');
return false
}
this.fileList = [...this.fileList, file];
//限制文件只能上传一个
this.fileList = this.fileList.slice(-1);
return false
},
点击确认
okBatch(fileList) {
if (fileList.length > 0) {
// file 是上传的文件
// 后端需要接受的参数是 formData数据，
const form = new FormData()
form.append('file', fileList[0])
//点击确定后先让确定按钮loading
this.confirmLoading1 = true
importTask(form).then((res) => {
if (res.code === 2000) {
//上传成功后取消loading
this.confirmLoading1 = false
this.visible1 = false
this.$message.info(res.message)
//重置列表数据
this.handleReset()
} else if (res.code === 5000) {
this.$message.error(res.message)
this.confirmLoading1 = false
} else {
this.$message.error(res.message)
this.confirmLoading1 = false
}
})
} else {
this.$message.error('您还没有上传文件！')
}
},点击取消
cancelBatch() {
if (!this.confirmLoading1) {
this.visible1 = false
} else {
this.$message.error('您正在上传文件!')
}
},具体就是这样完成的。文章来源：https://www.toymoban.com/news/detail-628986.html
写的比较菜，有问题欢迎在评论区提出讨论，谢谢！文章来源地址https://www.toymoban.com/news/detail-628986.html
到了这里，关于Ant Design upload 文件上传 限制文件只能上传一个的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
