在将react-avatar-edit生成的base64转换为blob并使用axios上传时卡住

0x6upsns 于 2022-12-12 发布在 iOS

关注(0)|答案(2)|浏览(146)

我试图使用react-avatar-edit来裁剪配置文件图像之前上传它，我做了实现成功，现在我可以得到裁剪的图像，但这里的问题，裁剪的图像检索在base64string第一个问题是试图将其转换为图像，经过研究，我发现下面的代码将其转换为blob后，一些尝试以几种方式解决它

// code from stack overflow link: https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript#answer-36183085
  convertBase64ToBlob = (url) =>{
    fetch(url)
      .then(res => res.blob())
      .then(blob => {
        this.convertBlobToFormData(blob)
      })
    ;
  }

然后我想把它作为一个文件发送，所以我用了这个

convertBlobToFormData = (blob) => {
    let data = new FormData();
    data.append('profile_image', blob)
    this.setState({
      convertedFile: data
    })
  }

并且在用户拖放crop形状时调用这些函数，您可以查看this link以了解有关包如何工作的更多详细信息

onCrop(preview) {
    this.setState({preview})
    this.convertBase64ToBlob(preview)
    console.log(this.state.convertedFile)
    
    if(this.state.convertedFile){
      this.props.onChange(this.state.convertedFile)
    };
  }

打印console.log中的blob时出现问题

Blob {size: 1805, type: "text/html"}

这意味着它无法将base46string转换为图像，我可以将其发送到端点，那么这是什么问题，以及如何修复它。
第二个问题是，在打印从convertBlobToFormData检索表单数据时，它检索enter image description here
那么，为什么存储blob会检索到空表单数据，以及如何解决这个问题
注意：我使用的后端是由另一个开发者开发的laravel后端

axios

来源：https://stackoverflow.com/questions/56799927/stuck-in-converting-base64-generated-from-react-avatar-edit-to-blob-and-uploadin

2条答案

按热度按时间

km0tfn4u1#

经过研究，我发现了一些信息，帮助我解决这个问题.一部分问题是在后端，因为我是用put方法发送请求，这是一个常见的问题，在php上传文件时，要解决它，你必须使用post方法发送文件，而不是put方法，你可以在这里找到详细信息
问题的另一部分是在将base64string转换为图像时，通过

urltoFile=(url, filename, mimeType)=>{
    mimeType = mimeType || (url.match(/^data:([^;]+);/)||'')[1];
    return (fetch(url)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){
          return new File([buf], filename, {type:mimeType});
        })
    );
  }

上面的代码将base 64字符串转换为文件并使用它

onCrop(preview) {
    this.setState({preview})
    this.urltoFile(preview, 'a.png')
      .then((file)=>{
        return this.props.onChange(file)
      });
  }

这段代码来自堆栈溢出，你可以在下面的链接中找到答案

赞(0）回复(0）举报 2022-12-12

velaa5lx2#

这个简单的函数对我来说非常有效

const convertToFile = async (dataUrl) => {
    const res = await fetch(dataUrl);
    const blob = await res.blob();
    let newFile = new File([blob], pictureName, { type: pictureType });
    handlePictureSelect(newFile)
  }

dataUrl是base64数据。
handlePictureSelect是一个将图片发送到后端的函数。当用户点击按钮上传图片时，我调用convertToFile。
希望这对你有帮助

赞(0）回复(0）举报 2022-12-12

我来回答

在将react-avatar-edit生成的base64转换为blob并使用axios上传时卡住

2条答案

相关问题

热门标签

最新问答