使用 Node/Express 和 Request 模块发布表单数据

Question

我可以从远程供应商 API 下载文件，并将这些文件发布到 Azure blob 存储中：Download file via Webservice and Push it to Azure Blob Storage via Node/Express

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

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

如何将通过 HTML 表单收集的表单数据传递给节点/express 调用，以便发布表单数据并从供应商 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

在明确了你的vendor API需要的HTTP方法和参数格式为POST和['boxHeight','boxWidth']之后，我们只需要稍作修改。

我们可以将 HTML 表单数据发布到 node.js 后端函数 uploadapifiles，并使用 form function of request API 将额外的表单数据发布到供应商 API。

这里是代码sn-ps的修改部分：

角度控制器：

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
    ));