nodejs 编写简单的图像 blob - Upload.dataUrltoBlob

Question

简单的问题。如何在 angular 的 Nodejs 中保存图像 blob。

角边：

$scope.upload = function (dataUrl, picFile) {

  Upload.upload({
    url: 'http://test.dev:3000/register/user/uploads',
    data: {
      file: Upload.dataUrltoBlob(dataUrl, picFile.name)
    },
  }).then(function (response) {
    $timeout(function () {
      $scope.result = response.data;
    });
  }, function (response) {
    if (response.status > 0) $scope.errorMsg = response.status
      + ': ' + response.data;
  }, function (evt) {
    $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
  });
}

nodejs 端：我这里需要中间件吗？如果可以，我应该使用哪一个？

router.post('/user/uploads', multipartMiddleware, function(req, resp) {

     var newPath = "/Users/testUser/test_hold_files/" + req.files.file.originalFilename;

     fs.writeFile(newPath, req.files.file, function(err) {

         if (err) {
             console.log("Data Error ");
             return console.error(err);
         }
     });

    res.status(200).jsonp({status: "status: success "});
});

现在这只是写出名称正确但为空的文件。

Answer 1

你以前可以通过req.files.imageName访问上传的文件，然后你会fs.readFile从tmp中永久写入，这在express 4.0中不再是这样了

In Express 4, req.files is no longer available on the req object by default. To access uploaded files on the req.files object, use multipart-handling middleware like busboy, multer, formidable, multiparty, connect-multiparty, or pez.

Soooooooo，您可以随意使用上面的中间件名称中的任何一个，然后按照它们的 API 来处理上传的文件，例如图像。希望这对您有所帮助，祝您愉快。

Answer 2

好的，

经过很长时间的搞乱这些东西。我找到了答案。它确实将文件加载到我的文件夹中。

我觉得这只是部分原因，因为它不会将实际文件的大小调整得更小。它是用 https://github.com/danialfarid/ng-file-upload 选择的。我用了

  Upload.upload({
    url: 'http://test.dev:3000/register/user/uploads',
    data: {
      file: Upload.dataUrltoBlob(dataUrl, picFile.name)
    },

这确实放大了所选图像上的文件。它并没有使实际文件大小更小。我仍在研究这个问题。

var formidable = require('formidable'),
    util = require('util'),
    fs_extra   = require('fs-extra');

这是我的post接受图片。

router.post('/user/uploads', function (req, res){
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        res.end(util.inspect({fields: fields, files: files}));
    });

    form.on('end', function(fields, files) {
        /* Temporary location of our uploaded file */
        var temp_path = this.openedFiles[0].path;
        /* The file name of the uploaded file */
        var file_name = this.openedFiles[0].name;
        /* Location where we want to copy the uploaded file */
        var new_location = "/Users/testUser/test_hold_files/";

        fs_extra.copy(temp_path, new_location + file_name, function(err) {
            if (err) {
                console.error(err);
            } else {
                console.log("success!")
            }
        });
    });
});

我还注意到我可以在 chrome 中查看文件，但不能将其加载到 gimp 中。 Gimp 给我一个文件错误。

我猜是小步骤。

也许 Datsik 可以让我们了解这里发生的事情。 https://whosebug.com/users/2128168/datsik

菲尔

nodejs 编写简单的图像 blob - Upload.dataUrltoBlob

nodejs write simple image blob - Upload.dataUrltoBlob

angularjs

node.js

ng-file-upload