【问题标题】:Retrieve image file from url using JS / Angular使用 JS / Angular 从 url 检索图像文件
【发布时间】:2016-05-31 16:37:07
【问题描述】:

我正在使用 MongooseJS 作为数据模型桥将数据从 wordpress 环境导出到 MongoDB。我有一个包含所有必需信息的每个对象的 JSON。

例如,我有一个用户项目,包括一个指向 wordpress 服务器 url 的头像路径字段:(例如:http://url/wp-content/upload/img/avatar.jpg

我想做的是从它的 url 中检索图像,将其上传到我的新存储文件夹,检索新路径,并将新对象存储在我的 mongodb 中。

我的问题是我无法找到从 http get 或任何其他方式获取文件数据的方法。通常,我的 html 中有一个文件输入,我从这个输入的文件对象开始。我应该如何着手进行这项工作?我是不是走错方向了?

我找到了这个答案,但它似乎已被弃用: how to upload image file from url using FileReader API?

这是我现在得到的:

$scope.curateurs_data = {};
$scope.curateurs = [];

  $http.get('resources/json_curateurs.json').success(function(data) {
    $scope.curateurs_data = data;
    console.log(data[0]);
    $scope.getPics();
  });

  //RETRIEVE IMAGE DATA
  $scope.getPics = function(data){
    console.log("RETRIEVING PICTURE")

    var uploadPlace = '/upload/user';
    var images;

    angular.forEach($scope.curateurs_data, function(item, key) {
      $scope.curitem = item;
      console.log($scope.curitem);

      $http.get(item.avatarpath, {responseType: "arraybuffer"}).success(function(data){

        var arrayBufferView = new Uint8Array( data );
        var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL( blob );

        console.log(imageUrl);
        console.log(blob);

        images = blob;

        var pic = {
          images: images
        };

        Upload.upload({
          url: uploadPlace,
          arrayKey: '',
          data: pic,
        }).then(function(response) {
          // Adding data paths to formData object before creating mood
          // MUST respect images array order
          $scope.curitem.avatarpath = response.data.files[0].path;
          console.log(response.data.files[0].path);
        });

      }).error(function(err, status){})  

      $scope.curateurs.push($scope.curitem);

    });
  }

我也尝试过类似的方法,但我似乎无法使其正常工作。

$http.get(item.avatarpath,{responseType: "blob"}).
        success(function(data, status, headers, config) {
            // encode data to base 64 url
            fr = new FileReader();
            fr.onload = function(){
                // this variable holds your base64 image data URI (string)
                // use readAsBinary() or readAsBinaryString() below to obtain other data types
                console.log( fr.result );
            };
            fr.readAsDataURL(data);
            console.log(fr.readAsDataURL(data));
        }).
        error(function(data, status, headers, config) {
            alert("The url could not be loaded...\n (network error? non-valid url? server offline? etc?)");
        });

【问题讨论】:

  • 为什么你的后端控制器不能下载文件?这似乎比尝试通过 HTTP 发送文件对象更直接。
  • 因为我是一个新手,仍在想办法解决这个问题。我使用 ExpressJS 和 Multer 进行上传。可以处理这个服务器端吗?

标签: javascript angularjs file get


【解决方案1】:

在后端使用 node 的 http 对象来下载图像。比如:

http.request(url, function(response) {                                        
     // Your code to write the file out or store it in the database here.                                                 
});                   

【讨论】:

  • 似乎有效,但响应正文如下:����JFIFHH��C↵↵↵������ ↵��B!1"AQaq��2B��#b� �� Rr��$%3���Ct������3↵!1"AQa�#2Bq��������R��?��V��r��>�c� JYi��"0Bz{���sٚu:b��>�F�(来自图片网址)
  • 我设法根据您的输入找到我的解决方案。在服务器端做这件事确实容易得多。
猜你喜欢
  • 1970-01-01
  • 2017-11-29
  • 2019-11-07
  • 1970-01-01
  • 1970-01-01
  • 2018-03-14
  • 2018-07-26
  • 1970-01-01
相关资源
最近更新 更多