上传前：
回显：可以删除 
最近做了一个后台管理系统使用的是 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('您正在上传文件!') } },具体就是这样完成的。
写的比较菜，有问题欢迎在评论区提出讨论，谢谢！
