Post 使用 Node/Express 和请求模块形成数据

Question

我可以从远程供应商 API 和 post 下载文件到 Azure blob 存储 posting:

这是按预期工作的，但现在我需要将表单数据传递到我发出的下载文件的请求中，因为我的供应商 API 将根据我的表单数据（例如图片的高度和宽度）。此代码是根据通过请求模块 (https://github.com/request/request) 传递给它的 URL 将文件下载到我的临时存储中的代码：

var r = request(req.body.url).pipe(fs.createWriteStream(tmpFileSavedLocation))

如何将通过 HTML 表单收集的表单数据传递给 node/express 调用，这样我就可以 post 我的表单数据并获得正确的图像高度和宽度来自我的供应商 API?

这是我的 HTML 表格：

<form id="newForm" class="form-horizontal" data-ng-submit="createContainer()">
        <div class="form-group">
            <label class="col-lg-2 control-label" for="width">Width *</label>
            <div class="col-lg-2">
                <input class="form-control" name="width" id="width" type="number" step="0.01" max="20" data-ng-model="formInfo.width" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label" for="height">Height *</label>
            <div class="col-lg-2">
                <input class="form-control" name="height" id="height" type="number" step="0.01" max="20" data-ng-model="formInfo.height" required>
            </div>
        </div>
        <div class="col-lg-10 col-lg-offset-2">
            <button type="submit" class="btn btn-primary">Create</button>
        </div>
        <span>{{formInfo}}</span>
    </form>

这是我的 Angular 控制器：

$scope.createContainer = function () {
        // Create Blob Container
        $http.get('/createcontainer').success(function (data) {
        // This passes back the container name that was created via the createcontainer call                
            var containerName = data;
            var filename1 = 'myfile.png';

            // Unsure of how to pass the formdata in!!!!
            var formData = $scope.formInfo

            // Get myfilepng
            $http.post('/uploadapifiles', { containerName: containerName, filename: filename1, url: 'http://vendorapi.net/ws/getimage' }).success(function (data) {
                console.log(data);
               }, function (err) {
                console.log(err);
            });
        });
    };

这是我的 server.js:

中的 uploadapifiles 调用

app.post('/uploadapifiles', function (req, res, next) {

var containerName = req.body.containerName;
var filename = req.body.filename;
var tmpBasePath = 'upload/'; //this folder is to save files download from vendor URL, and should be created in the root directory previously.
var tmpFolder = tmpBasePath + containerName + '/';

// Create unique temp directory to store files
mkdirp(tmpFolder, function (err) {
    if (err) console.error(err)
    else console.log('Directory Created')
});

// This is the location of download files, e.g. 'upload/Texture_0.png'
var tmpFileSavedLocation = tmpFolder + filename;

// This syntax will download file from the URL and save in the location asyns
var r = request(req.body.url).pipe(fs.createWriteStream(tmpFileSavedLocation))
r.on('close', function () {
    blobSvc.createBlockBlobFromLocalFile(containerName, filename, tmpFileSavedLocation, function (error, result, response) {
        if (!error) {
            console.log("Uploaded" + result);
            res.send(containerName);
        }
        else {
            console.log(error);
        }
    });
})
});

Answer 1

在明确了你的供应商API要求的HTTP方法和参数格式是POST和['boxHeight','boxWidth']之后，我们只需要稍微修改一下。

我们可以post将HTML表单数据发送到node.js后端函数uploadapifiles，并使用form function of requestAPI s 到 post 供应商 API.

的额外表格数据

修改后的部分代码片段如下：

Angular 控制器：

var formInfo = {boxHeight:$scope.formInfo.height,boxWidth:$scope.formInfo.width};
$http.post('/uploadapifiles', { containerName: containerName, filename: filename1, formInfo : formInfo ,url: 'http://vendorapi.net/ws/getimage' }).success(function (data){
 ... 
}

uploadapifiles服务器修改：要在 node/express 中获取 post 参数，我们可以利用 bodyParser 模块，

 //introduce and define middleware
 var bodyParser = require('body-parser');
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));

 //in uploadapifiles function 
 var propertiesObject = req.body.formInfo;
 var r = request.post(req.body.url).form(propertiesObject).pipe(fs.createWriteStream(tmpFileSavedLocation
    ));

Post 使用 Node/Express 和请求模块形成数据

Post form data using Node/Express and Request module

azure

node.js

express

angularjs

node-request