时间戳

首页 > 解决方案 > 使用 axios 上传到 AWS S3 时图像文件不正确

php - 使用 axios 上传到 AWS S3 时图像文件不正确

问题描述

我是使用 AXIOS 的新手。目前，我正在开发结合 AXIOS 代码的 laravel 框架。

我使用 axios 代码获取图像 URL 并将其存储到 AWS S3 中。我可以将图像存储到 S3 中，但图像文件不正确。图像文件只是一个图标图像。不是来自图像 URL 的图像。

这是代码

axios.get('https://www.instagram.com/p/B_zZCRpB895/media/?size=t', { responseType: "blob" })
      .then(function (response) { 
        var reader = new window.FileReader();
        reader.readAsDataURL(response.data);
        reader.onload = function () {  
          var imageDataUrl = reader.result; 
 
          var params = { 
                    Bucket: 'thumbnail', 
                    Key: 'shortlist/image.jpg', 
                    Body: imageDataUrl
          };
          s3.upload(params, function (err, data) { 
              console.log('result:');
              console.log(err, data);
              console.log('\n');
              var s3url = data.Location;

              console.log('s3 url: ' + s3url); 
          });

        }

      });

代码 var imageDataUrl = reader.result; 返回此结果

image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/7QB8UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAF8cAigAWkZCTUQyMzAwMDk2OTAxMDAwMDhiMDMwMDAwNmEwNDAwMDA2OTA1MDAwMDg1MDkwMDAwODQwYjAwMDBmMzBjMDAwMDQ1MGYwMDAwZjUxMDAwMDBiMzEyMDAwMAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCACWAJYDACIAAREBAhEB/8QAHAAAAQUBAQEAAAAAAAAAAAAABgADBAUHAgEI/8QAGgEAAgMBAQAAAAAAAAAAAAAAAgQAAQMFBv/aAAwDAAABEAIQAAAAz+DZVIFDELgbKuHOUJu2FVowaVxHp5uk7kcrV/cNvm0d+n8GZW05wWLnedGi2Ee6r06pYiPk45cCDwqqsJi7TzW5Hu2ZNqKHQMSEBI1mSrmfyUoc5KheDnWo5Lr3U47UWdHsK9OqWEUd9UXLHgeg4wM8m+66anoY1b8zqll/h2wyFkWk9DWrHq3ogqjijvurw..........

如何使用正确的图像文件将该结果图像上传到 S3？

请帮忙

标签： phplaravelaxios

解决方案

您必须将 base64 图像转换为 blob，然后使用流上传到 S3：

      ...
 
      var imageDataUrl = reader.result; 

      fetch(imageDataUrl)
         .then(res => res.blob())
            .then(blob => {

               //blob is your binary file
               var params = { 
                    Bucket: 'thumbnail', 
                    Key: 'shortlist/image.jpg', 
                    Body: blob
               };

              s3.upload(params, function (err, data) { 
              console.log('result:');
              console.log(err, data);
              console.log('\n');
              var s3url = data.Location;
              console.log('s3 url: ' + s3url); 
      });
              })

推荐阅读