使用 Antd 上传操作将图像上传到 firebase 存储时出现问题

2024-02-20

我用的是antd图片墙/卡片 https://ant.design/components/upload/#components-upload-demo-picture-card使用此将图像上传到我的 firebase 存储的示例参考代码 https://codesandbox.io/s/ym52x4q1p1我唯一要改变的地方是action属性于<Upload>成分。

On the action属性,我正在使用将图像上传到 firebase 存储而不是链接的函数如文档中所示,两者都被接受.

我的动作函数如下所示;

export async function uploadImage(file) {
    const storage = firebase.storage()
    const metadata = {
        contentType: 'image/jpeg'
    }
    const storageRef = await storage.ref()
    const imageName = generateHashName() //a unique name for the image
    const imgFile = storageRef.child(`Vince Wear/${imageName}.png`)
    return imgFile.put(file, metadata)
}

问题来了,图像成功上传到 firebase,但我不断收到 antd 响应处理错误,并且可能不确定是什么action函数应该返回,尽管文档中写到它应该返回一个承诺。

错误信息:

XML Parsing Error: syntax error
Location: http://localhost:3000/[object%20Object]
Line Number 1, Column 1:

错误还会在上传的图像缩略图上显示为红色边框。

请求帮助,我的操作函数应该返回什么来消除错误。我可以解析我的 firebase 响应并将必要的详细信息返回给 antd 上传操作。

Using

    "antd": "^3.9.2",
    "firebase": "^5.8.5",
    "react": "^16.7.0",

您可以使用customRequest解决这个问题的道具。看一看

class CustomUpload extends Component {
  state = { loading: false, imageUrl: '' };
  
  handleChange = (info) => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj, imageUrl => this.setState({
        imageUrl,
        loading: false
      }));
    }
  };

  beforeUpload = (file) => {
    const isImage = file.type.indexOf('image/') === 0;
    if (!isImage) {
      AntMessage.error('You can only upload image file!');
    }
    
    // You can remove this validation if you want
    const isLt5M = file.size / 1024 / 1024 < 5;
    if (!isLt5M) {
      AntMessage.error('Image must smaller than 5MB!');
    }
    return isImage && isLt5M;
  };

  customUpload = ({ onError, onSuccess, file }) => {
    const storage = firebase.storage();
    const metadata = {
        contentType: 'image/jpeg'
    }
    const storageRef = await storage.ref();
    const imageName = generateHashName(); //a unique name for the image
    const imgFile = storageRef.child(`Vince Wear/${imageName}.png`);
    try {
      const image = await imgFile.put(file, metadata);
      onSuccess(null, image);
    } catch(e) {
      onError(e);
    }
  };
  
  render () {
    const { loading, imageUrl } = this.state;
    const uploadButton = (
    <div>
      <Icon type={loading ? 'loading' : 'plus'} />
      <div className="ant-upload-text">Upload</div>
    </div>
    );
    return (
      <div>
        <Upload
          name="avatar"
          listType="picture-card"
          className="avatar-uploader"
          beforeUpload={this.beforeUpload}
          onChange={this.handleChange}
          customRequest={this.customUpload}
        >
          {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
        </Upload>
      </div>
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Antd 上传操作将图像上传到 firebase 存储时出现问题 的相关文章

随机推荐