使用multiparty流调整图像大小

时间:2015-03-24 09:14:25

标签: node.js azure express transloadit

如何在我的场景中使用GraphicsMagick或transloadit?

我使用expressjs multiparty将文件上传到Azure存储:

app.post('/upload', function (req, res) {
    var blobService = azure.createBlobService();
    var form = new multiparty.Form();

    form.on('part', function(part) {
        if (part.filename) {
            var filename = part.filename;
            var size = part.byteCount;

            var onError = function(error) {
                if (error) {
                    res.send({ grrr: error });
                }
            };
            blobService.createBlockBlobFromStream('container', filename, part, size, onError);
        } else {
            form.handlePart(part);
        }
    });

    form.parse(req);
    res.send("SWEET");
});

在上传到存储之前,我是否可以使用任何服务来调整图像和缩略图的大小。我不想将文件保存到临时文件夹,因为我使用的是azure网站。

1 个答案:

答案 0 :(得分:0)

披露:我正在Transloadit工作,所以我将向这个方向发展。

选项1,请自行处理上传:

由于您自己处理并使用Node.js,因此可以使用Node.js SDK将文件发送到Transloadit:

// npm install transloadit --save
const TransloaditClient = require('transloadit')

const transloadit = new TransloaditClient({
  authKey: 'YOUR_TRANSLOADIT_KEY',
  authSecret: 'YOUR_TRANSLOADIT_SECRET'
})

// Likely you'll want to use .addStream(part) here instead!
transloadit.addFile('myfile_1', './chameleon.jpg')

const options = {
  params: {
    steps: {
      thumbed: {
        use: ':original',
        robot: '/image/resize',
        width: 75,
        height: 75,
        resize_strategy: 'fit',
      },
    }
  }
}

transloadit.createAssembly(options, (err, result) => {
  if (err) {
    throw err
  }

  console.log({result})
})

现在,文件由Transloadit调整大小,您可以使用我们的/azure/export Robot将该文件发送到Azure存储:

"exported": {
  "use": ["thumbed"],
  "robot": "/azure/store",
  "credentials": "YOUR_CREDENTIALS"
}

选项2,让Tranloadit也处理上传

或者,您可以将新的开源文件上传器Uppy作为插件拖放到您的网站中,并使用其Transloadit插件将文件直接发送到Transloadit。编码和Azure导出说明将保存在您的Tranloadit帐户内的模板中。您可以在Uppy集成中引用该template_id,然后就不必自己编写任何服务器端代码或处理分段上传。您上传的内容也会恢复。 Uppy网站上有一个live example。这是我将其调整为适合您的用例(未经测试)的方式:

<!-- Basic Uppy styles. You can use Transloadit's CDN, Edgly:
https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.css -->
<link rel="stylesheet" href="/uppy/uppy.min.css">

<div class="UppyDragDrop"></div>

<!-- Load Uppy pre-built bundled version. You can use Transloadit's CDN, Edgly:
https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.js -->
<script src="/uppy/uppy.min.js"></script>
<script>
  var uppy = Uppy.Core();
  uppy.use(Uppy.DragDrop, {
    target: '.UppyDragDrop',
  });
  uppy.use(Transloadit, {
    params: {
      auth: {
        key: YOUR_TRANSLOADIT_API_KEY
      },
      template_id: YOUR_TEMPLATE_ID
    },
    waitForEncoding: true
  });

  console.log('--> Uppy pre-built version with Tus, DragDrop & Russian language pack has loaded');
</script>