Antd - a-upload-dragger drag upload component - Basic accumulation

Recently, I'm doing background management system , One requirement is to implement drag and drop uploading .

At first I thought about using Ali oss Upload , But the requirement here is to upload locally .

The renderings are as follows ：

1.antd Upload components on the official website :https://1x.antdv.com/components/upload-cn/

antd Official website upload component ：https://1x.antdv.com/components/upload-cn/

2. Upload code

<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"> Please select upload file </p>
  <p class="ant-upload-hint" style="color: red">
     You can drag or select files , Please select a suffix .xlsx.xls Format file 
  </p>
</a-upload-dragger>

2.1 In the above form.file, This is an array type

2.2 beforeUpload Functions before uploading

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

2.3 handleRemove Function removed

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

3. Save the code section

const formData = new FormData();
formData.append("file", this.form.file[0]);
// The following saved interface , This needs to be matched with the backend 
this.confirmLoading = true;
postCheckPaySafeUpload(formData)
  .then((res) => {
    
    if(res.IsOk){
    
      this.confirmLoading = false;
      this.$message.success(" Successful operation ");
    }else{
    
      this.$message.error(res.Message)
    }
  })
  .finally(() => {
    
    this.confirmLoading = false;
  });

complete ！！！