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

【问题标题】：Issues while uploading an image to firebase storage with Antd upload action使用 Antd 上传操作将图像上传到 Firebase 存储时出现问题
【发布时间】：2019-08-23 15:57:31
【问题描述】：

我正在使用 antd picture-wall/card 示例通过此 reference code 将图像上传到我的 Firebase 存储，而我唯一要更改的地方是 <Upload> 组件上的 action 属性。

在 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 上传操作。

使用

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

【问题讨论】：

尝试创建一个 imgFile 类型的新对象，而不是从 dom oO 注入它
@jonathanHeindl 为什么，我不认为这是问题，因为图像已成功上传到 Firebase。
哦，对不起，我错过了 :( 你是否已经尝试过其他标准返回值？比如 true 或 void ？
顺便说一句，我检查了源代码类型定义（这不是很有帮助：/）action?: string | ((file: UploadFile) => PromiseLike<any>);
ok antd 只是在 2.6.0 版本中将上传传递给 rc-upload （！！如果依赖解析器假设它可以升级到最新版本，则操作函数的处理方式相同）但在 2.6 版本中.0 其他 2 个选项：要么作为 ajax 上传器处理，它假定要返回一个 url（因为它直接将返回值作为 url 放入请求中），要么是 iframeuplaoder，它只是将它作为表单属性 oO 添加，我建议尝试使用 www.google.de 之类的 url 进行测试，即使我现在不确定它期望使用哪种 http 方法

标签： javascript reactjs firebase firebase-storage antd

【解决方案1】：

您可以使用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>
    );
  }
}

【讨论】：

【解决方案2】：

把这个留在这里，以防有人也想跟踪文件的进度

 const customUpload = async ({ onError, onSuccess, file, onProgress }) => {
    let fileId = uuidv4()
    const fileRef = stg.ref('demo').child(fileId)
    try {
      const image = fileRef.put(file, { customMetadata: { uploadedBy: myName, fileName: file.name } })

      image.on(
        'state_changed',
        (snap) => onProgress({ percent: (snap.bytesTransferred / snap.totalBytes) * 100 }),
        (err) => onError(err),
        () => onSuccess(null, image.metadata_)
      )
    } catch (e) {
      onError(e)
    }
  }

【讨论】：