如何在 NativeScript 中从图像中获取文件并将其上传到服务器

Question

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

 <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，在这种情况下就是这样...

Answer 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

了解更多

如何在 NativeScript 中从图像中获取文件并将其上传到服务器

How to get file from Image in NativeScript and upload it to server

nativescript

nativescript-vue