今天遇到测试提起的一个项目bug。

使用antd里面的 upload 组件上传图片，本地测试使用没有问题。

当项目上传到服务器，测试 接口报405，打开控制台中的network，访问了一个没有调用的接口，nginx 报405。

网上查询资料，是upload组件上传图片默认调用了action 路径，如果未设置的话，就以当前网页的url为路径进行访问。方法为post请求进行访问静态资源。

使用customRequest属性来阻止默认上传行为

<Uploadname="avatar"listType="picture-card"className="avatar-uploader"showUploadList={false}beforeUpload={this.beforeUpload.bind(this)}onChange={this.handleChange.bind(this)}customRequest={this.uploadHeadImg.bind(this)}>{headImgUrl ? <img src={headImgUrl} alt="avatar" style={{width: '100%' }} /> : uploadButton}</Upload>

beforeUpload(file) {const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {message.error('你只能上传 JPG/PNG 文件!');}const isLt2M = file.size / 1024 / 1024 < 2;if (!isLt2M) {message.error('图片大小必须小于 2MB!');}return isJpgOrPng && isLt2M;}handleChange (info) {if (info.file.status === 'uploading') {this.setState({ loading: true });return;}if (info.file.status === 'error') {this.setState({ loading: false });message.error('上传失败');}};uploadHeadImg(info){//这里是我自己项目封装的上传图片方法（想深入此方法的，可查看我之前的文章），此处读者可自行更改为自己的上传方法。requestFile({multipartFile: info.file},uploadFile,(res)=>{message.success('上传成功！');if(res){const headImgUrl=baseUrl+res;this.setState({headImgUrl,loading: false,})}})}