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

时间:2015-09-29 15:20:05

标签: angularjs node.js azure express node-request

我可以从远程供应商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表单收集的表单数据传递到我的node / 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>

这是我的角度控制器:

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

1 个答案:

答案 0 :(得分:1)

在澄清了供应商API所需的HTTP方法和params格式POST['boxHeight','boxWidth']之后,我们只需要稍加修改。

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

以下是代码段的修改部分:

角度控制器:

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 params,我们可以利用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
    ));