Ant Design上传组件upload上传文件404问题

问题描述：

当使用upload组件的时候会出现404的情况，生产环境会出现 405的情况，是因为upload上传组件有默认行为，只需要阻止默认上传行为即可

解决：

方法一：

阻止上传组件的默认行为：上传拦截的方法中返回false即可

代码：

      <a-upload
        v-if="
          needUpload &&
          (!curFileList?.length ||
            curFileList?.length < (fileConfig?.maxLength ? fileConfig?.maxLength : 9))
        "
        :multiple="multiple"
        list-type="picture-card"
        accept="image/*"
        :show-upload-list="false"
        :before-upload="beforeUpload"
      >
        <div>
          <plus-outlined></plus-outlined>
          <div class="hf-fu-text">上传图片</div>
        </div>
      </a-upload>

  // 上传拦截
  const beforeUpload = async (file) => {
    console.log(file)
    const isPNG =
      file.type === 'image/png' ||
      file.type === 'image/jpg' ||
      file.type === 'image/jpeg' ||
      file.type === 'image/gif'
    if (!isPNG) {
      return message.warn('请按规定格式上传文件！')
    }

    // let fileList = e.target.files
    // for (let i = 0; i < fileList.length; i++) {
    //   const element = fileList[i]
    //   emit('iptChange', element, 100)
    // }
    if (props?.imgSize) {
      const size = await handleImgBase(file)
      if (size.imgWidth !== props.imgSize.width || size.imgHeight !== props.imgSize.height) {
        message.warn('请按规定图片尺寸上传!')
        return false
      }
    }
    const size = props?.fileConfig?.size ? props?.fileConfig?.size : 20
    emit('iptChange', file, size)

    //阻止上传组件的默认行为
    return false
  }

解决：

方法二：

代码：

      <a-upload
        :multiple="multiple"
        list-type="picture-card"
        accept="image/*"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :customRequest="customRequest"
      >
        <div>
          <plus-outlined></plus-outlined>
          <div class="hf-fu-text">上传图片</div>
        </div>
      </a-upload>

  const customRequest= (data) => {

  }