如何从 NativeScript 中的 Image 获取文件并将其上传到服务器

Posted 2023-04-14

【中文标题】如何从 NativeScript 中的 Image 获取文件并将其上传到服务器

【英文标题】：How to get file from Image in NativeScript and upload it to server

【发布时间】：2020-02-02 04:55:49

【问题描述】：

我有一个组件可以显示由相机拍摄或从图库中选择的图像。关键是当用户单击上传按钮时，我应该将该图像发送到我的服务器，但我无法从图像组件中提取文件。

 <Image ref="profileImage" borderRadius="100"   marginTop="20" stretch="aspectFill" :src="profileImage" />

我有两个功能可以选择图像或捕获图像

  capture: function() 
    var isAvailable = camera.isAvailable();
    if (isAvailable) 
      var options = 
        width: 300,
        height: 300,
        keepAspectRatio: false,
        saveToGallery: false,
        cameraFacing: 'front'
      ;
      var self = this;
      var imageModule = require("tns-core-modules/ui/image");
      camera.requestPermissions().then(
        function success() 
          camera.takePicture(options)
            .then(function(imageAsset) 
              self.profileImage = imageAsset;
            ).catch(function(err) 
              console.log("Error -> " + err.message);
            );
        ,
        function failure() 
          // permission request rejected
        
      );
    
  ,
  pick() 
    var self = this;
    let context = imagepicker.create(
      mode: 'single',
      mediaType: 'image'
    );
    context.authorize()
      .then(function() 
        return context.present();
      )
      .then(selection => 
        selection.forEach(selected => 
          self.profileImage = selected;
        );
      ).catch(function(e) 
        console.log('error in selectPicture', e);
      );

  ,

接下来我需要做的是获取上传的图像并将其发送到服务器，但我似乎找不到选项，我有 src ，在这种情况下就是这样......

【参考方案1】：

您可以简单地从 ImageAsset 中获取 ImageSource 并将其写入数据或临时目录中的文件，然后将其上传到服务器。

const imageSourceModule = require("tns-core-modules/image-source");
const fileSystemModule = require("tns-core-modules/file-system");

function uploadAsset(asset) 
   imageSourceModule.fromAsset(asset)
      .then(function(imageSource) 
          var folderDest = fileSystemModule.knownFolders.documents();
          var pathDest = fileSystemModule.path.join(folderDest.path, "test.png");
          var saved = imageSource.saveToFile(pathDest, "png");
          if (saved) 
             console.log("Image saved successfully!");
             // Now file is written at path `pathDest`
          
      ).catch(function(err) 
         console.log(err);
      );


....

uploadAsset(profileImage);

通过docs了解更多信息