问题描述:
当使用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) => {
}