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

本文介绍了使用 Antd 上传操作将图像上传到 Firebase 存储时出现问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在使用 antd picture-wall/card 使用此 参考代码 将图像上传到我的 Firebase 存储的示例，我更改的唯一地方是 < 组件上的 code>action 属性.

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

我的动作函数是这样的；

导出异步函数uploadImage(file) {const storage = firebase.storage()常量元数据 = {内容类型:'图像/jpeg'}const storageRef = 等待 storage.ref()const imageName = generateHashName()//图像的唯一名称const imgFile = storageRef.child(`Vince Wear/${imageName}.png`)返回 imgFile.put(文件，元数据)}

问题来了，图像已成功上传到 firebase，但我不断收到 antd 响应处理错误，并且可能不确定 action 函数应该返回什么，即使已写入在文档中它应该返回一个承诺.

错误信息:

XML 解析错误:语法错误位置:http://localhost:3000/[object%20Object]第 1 行，第 1 列:

错误也会在上传的图片缩略图上显示为红色边框.

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

使用

 "antd": "^3.9.2","firebase": "^5.8.5",反应":^ 16.7.0"，

解决方案

您可以使用 customRequest 道具来解决此问题.看看

class CustomUpload extends Component {状态 = { 加载:false，imageUrl:'' };handleChange = (信息) =>{if (info.file.status === '上传') {this.setState({loading: true });返回;}if (info.file.status === 'done') {getBase64(info.file.originFileObj, imageUrl => this.setState({图片网址，加载:假}));}};beforeUpload = (文件) =>{const isImage = file.type.indexOf('image/') === 0;如果(！isImage){AntMessage.error('只能上传图片文件！');}//如果需要，您可以删除此验证const isLt5M = file.size/1024/1024 <5;如果(！isLt5M){AntMessage.error('图片必须小于5MB！');}返回 isImage &&是Lt5M；};customUpload = ({ onError, onSuccess, file }) =>{const storage = firebase.storage();常量元数据 = {内容类型:'图像/jpeg'}const storageRef = 等待 storage.ref();const imageName = generateHashName();//图像的唯一名称const imgFile = storageRef.child(`Vince Wear/${imageName}.png`);尝试 {const image = await imgFile.put(file, metadata);onSuccess(null, image);}赶上(e){onError(e);}};使成为 () {const { loading, imageUrl } = this.state;常量上传按钮 = (<div><图标类型={加载中?'加载':'加'}/><div className="ant-upload-text">上传</div>
);返回 (<div><上传名称=头像"listType="图片卡"className="头像上传者"beforeUpload={this.beforeUpload}onChange={this.handleChange}customRequest={this.customUpload}>{图片网址?<img src={imageUrl} alt="头像"/>: 上传按钮}</上传>
);}}

I'm using antd picture-wall/card example to upload images to my firebase storage with this reference code and the only place I'm changing is action property on <Upload> component.

On the action property, I'm using a function that uploads the images to firebase storage instead of a link both are accepted as seen in docs.

My action function looks like this;

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)
}

Issue comes, The image uploads to firebase successfully, but I keep getting antd response handling errors and possibly not sure what action function should return, even though, is written in the docs that it should return a promise.

Error message:

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

Errors also appear as a red border on the uploaded image thumbnail.

Requested help, What should my action function return to get rid of errors. I can parse my firebase response and return the necessary details to antd upload action.

Using

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

解决方案

You can use customRequest prop to fix this issue. Have a look

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>
    );
  }
}

这篇关于使用 Antd 上传操作将图像上传到 Firebase 存储时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！