antd——a-upload-dragger拖拽上传组件的使用

最近在做后台管理系统，遇到一个需求就是实现拖拽上传。

我一开始想的是用阿里oss上传，但是这边的要求是本地上传。

效果图如下：

1.antd官网上传组件部分:/components/upload-cn/

antd官网上传组件：/components/upload-cn/

2. 上传代码部分

<a-upload-draggerstyle=""accept=".xlsx,.xls,.csv":file-list="form.file":remove="handleRemove":before-upload="beforeUpload"><p class="ant-upload-drag-icon"><a-icon type="inbox" /></p><p class="ant-upload-text">请选择上传文件</p><p class="ant-upload-hint" style="color: red">可拖拽或者选择文件，请选择后缀.xlsx.xls格式文件</p></a-upload-dragger>

2.1上面中的form.file，这个是个数组的类型

2.2beforeUpload上传前的函数

beforeUpload(file) {this.form.file = [...this.form.file, file];return false;},

2.3handleRemove移除的函数

handleRemove(file) {const index = this.form.file.indexOf(file);const newFileList = this.form.file.slice();newFileList.splice(index, 1);this.form.file = newFileList;},

3. 保存代码部分

const formData = new FormData();formData.append("file", this.form.file[0]);//下面的保存的接口，这个需要跟后端匹配一下this.confirmLoading = true;postCheckPaySafeUpload(formData).then((res) => {if(res.IsOk){this.confirmLoading = false;this.$message.success("操作成功");}else{this.$message.error(res.Message)}}).finally(() => {this.confirmLoading = false;});

完成！！！多多积累，多多收获！！！