angularjs – 通过Webservice下载文件,并通过Node / Express将其推送到Azure Blob存储

前端之家收集整理的这篇文章主要介绍了angularjs – 通过Webservice下载文件,并通过Node / Express将其推送到Azure Blob存储前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要从供应商的Web服务中检索文件并将它们推送到一个独特的blob容器中,以便用户拥有一个独特的“工作区”.基本上,我会从供应商那里获取文件,用户可以通过他们自己的blob容器中的文件编辑这些文件,这样他们就不会互相交换工作文件.我有独特的blob容器工作,但需要从我的供应商API“下载”/获取文件并将它们推送到blob容器中.我能够成功检索文件,这将是单独的调用获取PDF,文本文件和图像…但是如果我尝试将它们上传到Azure Blob存储,我在Node.js中收到以下错误

TypeError: Cannot read property ‘length’ of null

我想我需要在客户端将文件编码为base64以正确获取长度,并且已经看到了使用Canvas和toDataURL的一些示例,但我不确定这是否是实际下载和直接推送到的最佳方法Azure Blob存储,特别是因为我有PDF等文件(不确定PDF是否可以进行base64编码).

这是调用服务的AngularJS控制器(注意实际端点可能会根据它们调用文件而改变,所以我使用客户端GET文件来控制用户可以在表单中输入的变量):

  1. $scope.getFiles = function () {
  2.  
  3. $.ajax({
  4. url: 'http://vendorwebservice.net/ws/file1',type: "GET",success: function (result) {
  5. console.log(result);
  6. var filename = 'Texture_0.png';
  7.  
  8. $http.post('/postFile',{ filename: filename,file: result }).success(function (data) {
  9. console.log(data);
  10. },function (err) {
  11. console.log(err);
  12. });
  13.  
  14. alert("Files Retrieved!");
  15. },error: function (error) {
  16. console.log("Failed to download image!");
  17. }
  18. })
  19. }

这是我的后端/ Node / Express代码

  1. app.post('/postFile',function (req,res,next) {
  2. var filename = req.body.filename;
  3. var file = req.body.file;
  4. var base64Data;
  5. fileBuffer = decodeBase64Image(file);
  6. blobSvc.createBlockBlobFromText('blob5',filename,fileBuffer.data,{ 'contentType': fileBuffer.type },function (error,result,response) {
  7. if (!error) {
  8. console.log("Uploaded" + result);
  9. }
  10. else {
  11. console.log(error);
  12. }
  13. });
  14. })
  15.  
  16. // Decode file for upload
  17. function decodeBase64Image(dataString) {
  18. var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),response = {};
  19.  
  20. if (matches.length !== 3) {
  21. return new Error('Invalid input string');
  22. }
  23.  
  24. response.type = matches[1];
  25. response.data = new Buffer(matches[2],'base64');
  26.  
  27. return response;
  28. }

更新1:
根据Gary的建议,我尝试了以下内容,但由于我的供应商API没有文件URI,而是在GET上生成文件的端点,因此搞砸了代码(也就是说,我在如何通过端点而不是Gary的有意义的例子).例如,我的供应商端点’http://vendorapi.net/ws/texture_0‘返回名为“Texture_0.png”的文件.

前端角度代码

  1. $scope.getFromVendor = function () {
  2. var filename = 'Texture_0.png';//jpg,txt...
  3. $http.post('/uploadapifiles',url: 'http://vendorapi.net/ws/texture_0' }).success(function (data) {
  4. console.log(data);
  5. },function (err) {
  6. console.log(err);
  7. });
  8. }

服务器端下载处理(我相信这是最混乱的一个:

  1. app.get(http://vendorapi.net/ws/texture_0',next) {
  2. res.download('http://vendorapi.net/ws/texture_0' + req.params.filename);
  3. })

服务器端上传处理:

  1. app.post('/uploadapifiles',next) {
  2.  
  3. var filename = req.body.filename;
  4. var r = request(req.body.url).pipe(fs.createWriteStream('http://vendorapi.net/ws/texture_0' + filename))
  5. r.on('close',function () {
  6. blobsrv.createBlockBlobFromLocalFile('blob5','http://vendorapi.net/ws/texture_0' + filename,response) {
  7. if (!error) {
  8. console.log("Uploaded" + result);
  9. }
  10. else {
  11. console.log(error);
  12. }
  13. });
  14. })
  15. });
在您最初的想法中,首先您在客户端获取文件内容数据,然后将数据发布到Express Web服务器.

如果你得到的文件很大,它会减慢你的网站速度,因为文件数据将通过HTTP传输两次,并且可能会出现其他问题.

此外,在我的测试项目中,很难直接处理文件内容数据.

所以我尝试了另一种想法作为解决方法.

我只是将获取特定文件的API发布到服务器,将文件保存为服务器目录中的文件并将文件上载到服务器端的存储.
这是我的代码片段:

角度前端:

  1. $scope.upload =function(){
  2. var filename = (new Date()).getTime()+'.pdf';//jpg,txt...
  3. $http.post('http://localhost:1337/uploadfile',url: 'http://localhost:1337/output/123.pdf'}).success(function (data) {
  4. console.log(data);
  5. },function(err){
  6. console.log(err);
  7. });
  8. }

后端:

我怀疑你获得文件格式的API就像落后了.

  1. router.get('/output/:filename',next) {
  2. res.download('upload/'+req.params.filename);
  3. })

post请求处理程序利用包request,并且没有必要确定文件类型或编码类型,createBlockBlobFromLocalFile将在blob存储上提供的位置上传文件,API reference

  1. router.post('/uploadfile',next) {
  2. var request = require('request');
  3. var filename = req.body.filename;
  4. var tmpFolder = 'upload/',//this folder is to save files download from vendor URL,and should be created in the root directory prevIoUsly.
  5. tmpFileSavedLocation = tmpFolder + filename; //this is the location of download files,e.g. 'upload/Texture_0.png'
  6. var r = request(req.body.url).pipe(fs.createWriteStream(tmpFileSavedLocation))//this Syntax will download file from the URL and save in the location asyns
  7. r.on('close',function (){
  8. blobsrv.createBlockBlobFromLocalFile('vsdeploy',tmpFileSavedLocation,response) {
  9. if (!error) {
  10. console.log("Uploaded" + result);
  11. }
  12. else {
  13. console.log(error);
  14. }
  15. });
  16. })
  17.  
  18. })

猜你在找的Angularjs相关文章