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

259 阅读1分钟

问题描述:

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

image.png

image.png

解决:

方法一:

阻止上传组件的默认行为:上传拦截的方法中返回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 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('请按规定格式上传文件!')
    }
        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
  }

解决:

方法二:

自定义上传行为

image.png

代码:

const customRequest= (data) => {

  }