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

【问题标题】：How to get file from Image in NativeScript and upload it to server如何从 NativeScript 中的 Image 获取文件并将其上传到服务器
【发布时间】：2020-02-02 04:55:49
【问题描述】：

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

 <Image ref="profileImage" borderRadius="100" width="150" height="150" 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 ，在这种情况下就是这样......

【问题讨论】：

标签： nativescript nativescript-vue

【解决方案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了解更多信息

【讨论】：