界面样式

界面实现代码

<template>
  <a-modal
    title="Upload Stuffing Plan by Release Key"
    :width="757"
    :visible="visible"
    :confirmLoading="uploading" //等待
    okText="Next" 
    @ok="onSubmit"
    @cancel="
      () => {
        $emit('cancel') //父类方法
      }
    "
    :keyboard="false"
    :maskClosable="false"
  >
    <a-spin :spinning="uploading">
      <div class="upload-content-mdl">
        <a-row type="flex">
          <a-col class="upload-left">
            <img class="upload-left-img" src="@/assets/min/up.png" alt="" />
          </a-col>
          <a-col class="upload-right">
            <h1>Upload the completed data sheet</h1>
            <p>The file suffix must be XLS or XLSX (Excel format), the file size must not be larger than 10M.</p>
            //fileList 放置文件位置
            //beforeUpload 文件发送后端前执行方法
            //RemoveFile 清空fileList中文件
            <a-upload style="margin-top: -5px" :file-list="fileList" :before-upload="beforeUpload" :remove="RemoveFile">
              <a v-if="fileList.length < 1">Upload a file</a>
            </a-upload>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </a-modal>
</template>

 文件发送给后端前修改文件名称（处理文件包含 ' ，导致不能正常上传）

**file 是没有 set 属性的，只有 get**

两种处理方式：

•  在 beforeUpload() 方法中对文件重新命令

        var file = new File([file], "xxx");  --  后面是自定义名称

• 在 onSubmit() 文件发送给后端时进行处理

onSubmit() {
      const { fileList } = this
      const formData = new FormData()
      //获取文件名称
      let names = fileList[0].name.split(".");
      Object.defineProperty(fileList[0],'name',{
        writable:true,//设置属性为可写
      })
        //处理文件名称
		  fileList[0].name = names[0].replaceAll("'","") + "." + names[names.length-1];
      formData.append('releaseKeyExcelFile', fileList[0],fileList[0].name)
      //上传文件到后端
      axios({
        url: xxxx',
        method: 'post',
        processData: false,
        headers: { 'Content-Type': 'multipart/form-data', Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN) },
        data: formData,
      })
        .then((res) => {
          this.fileList = []
          this.$emit('ok')
        })
        .catch((err) => {
          // error
        })
    }