如何使用 Nativecript-camera 拍照并上传到服务器答案

【问题标题】：How to take a photo and upload it to the server with Nativecript-camera如何使用 Nativecript-camera 拍照并上传到服务器
【发布时间】：2019-11-20 18:37:15
【问题描述】：

我是 Nativescript Vue 开发的新手，我正在尝试拍照并将其发送到服务器。我的代码在 Android 上运行良好，但是当我在 iOS 上运行时，出现错误，图像甚至没有粘贴到页面上，也没有上传到服务器。

import * as camera from "nativescript-camera";
import * as bghttp from "nativescript-background-http";
const firebase = require("nativescript-plugin-firebase");
var session = bghttp.session("image-upload");

takePicture() {
                camera.requestPermissions()
                    .then(() => {
                        camera.takePicture({ width: 300, height: 300, keepAspectRatio: true, saveToGallery:true })
                            .then(imageAsset => {
                                this.img = imageAsset.android;
                            })
                            .catch(e => {
                                console.log('error:', e);
                            });
                    })
                    .catch(e => {
                        console.log('Error requesting permission');
                    });
            } 
upload() {

                var file =  this.img;
                var url = "https://bocorp.ru/assets/mobileNewOrder.php";
                var name = file.substr(file.lastIndexOf("/") + 1);

                // upload configuration
                var bghttp = require("nativescript-background-http");
                var session = bghttp.session("image-upload");
                var request = {
                    url: url,
                    method: "POST",
                    headers: {
                        "Content-Type": "application/octet-stream",
                        "File-Name": name,
                    },
                    content: JSON.stringify({
                        Title: title
                    }),
                    description: "Uploading " + name
                };
                var task = session.uploadFile(file, request);

我知道应该在“this.img = imageAsset.android;”中使用另一个代码但我不明白如何从 Iphone 相机中获取照片。我会很高兴收到任何提示

【问题讨论】：

您必须使用 ImageSource 模块将照片保存到文件中，然后使用保存的图像上传到服务器。

标签： nativescript nativescript-vue

【解决方案1】：

我们将图像保存到设备中，然后以分段上传的形式上传。您可能可以跳过文件保存部分，但它确实允许我们避免读取整个图像以便稍后在我们的应用程序流程中上传（我想如果您已经有要显示的图像源，您可以重复使用它来上传同一页）。

希望对您有所帮助。

const imageSource = require('tns-core-modules/image-source')
// ...
camera.takePicture(cameraOpts)
  .then(imageAsset => { 
    return imageSource.fromAsset(imageAsset)
  })
  .then(imageSource => {
    let pathDest = '/path/on/device' // you define
    console.log(`Created image source with width=${imageSource.width} height=${imageSource.height} at ${pathDest}`)
    imageSource.saveToFile(pathDest, 'jpg', 50)
    return pathDest // save this to look up later
})

那么当我们需要上传时

const mime = require('mime-types')
import * as bghttp from 'nativescript-background-http'
...
let session = bghttp.session('image-upload')
let request = {
  url: 'https://yourendpoint.com/here',
  method: 'POST',
  androidAutoDeleteAfterUpload: true,
  headers: {
    'Content-Type': 'application/octet-stream',
  }
}
// photoPath is known somehow. We use Vuex, but somehow it makes it to this page
let params = [
  { name: 'photo1', filename: photoPath, mimeType: mime.lookup(photoPath) }
]
return new Promise((resolve, reject) => {
  let task = session.multipartUpload(params, request)
   task.on('error', (e) => {
      reject(e)
   })
   task.on('complete', res => {
     resolve()
   })
 })

【讨论】：