antd——a-upload-dragger拖拽上传组件——基础积累

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

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

效果图如下：

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

antd官网上传组件：https://1x.antdv.com/components/upload-cn/

2. 上传代码部分

<a-upload-dragger
  style=""
  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.2 beforeUpload上传前的函数

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

2.3 handleRemove移除的函数

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;
  });

完成！！！