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;});
完成!!!多多积累,多多收获!!!