上传图片离子3

问题描述

我正在开发离子3中的应用程序，需要使用在流明框架中创建的API将图像上传到服务器。
上传图片的请求是：
图片从相机中点击并转换为base64。

I am developing an app in ionic 3 and need to upload image to server using an api created in lumen framework.The request to upload image is :The image is clicked from camera and converted to base64.

let base64Image = 'data:image/jpeg;base64,' + imageData;

然后我使用FileUpload上传图片

Then i use FileUpload to upload image

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';

buildHeadersDeals(){
    this.header = new Headers();
    this.header.append('Authorization', 'Basic '
                                      +btoa("test:test"));
}

uploadPhoto(image, token) {
    this.buildHeadersDeals();

    url = 'http://192.168.2.12/api/upload?token="+token;

    const fileTransfer: FileTransferObject = this.transfer.create();
    let options: FileUploadOptions = {
             fileKey: 'photo',
             fileName: image.substr(image.lastIndexOf('/')+1),
             chunkedMode: true,
             mimeType: "image/jpeg",
             headers: this.header,
          }

    return fileTransfer.upload(image, encodeURI(url), options)
                .then((data) => {
                       console.log(data);
                       return data;
           }, (err) => {
               console.log(err);
         });
   }

和我的api结束是：

public function upload(Request $request) {
     if ($request->hasFile('photo')) {
      $image = $request->file('photo');
      $response['image'] = $image;
      return response()->json($response,200);
    }
}

我有两个问题：

1）我总是将照片视为空（$ request-> file（'photo'））

1) I always get photo as null ($request->file('photo'))

2）可以告诉一些人我发送令牌作为参数，下面的代码不起作用：

2) Can some one tell me to send token as params, the below code does not work:

let options: FileUploadOptions = {
             fileKey: 'photo',
             fileName: image.substr(image.lastIndexOf('/')+1),
             chunkedMode: true,
             mimeType: "image/jpeg",
             headers: this.header,
             params: {
                'token': 'sffsdhnzchvh'
             }
          }

谢谢

推荐答案

我已安装cordova-plugin-camera： ^ 4.0.2和cordova-plugin-file：^ 6.0.1

i have install "cordova-plugin-camera" : "^4.0.2" and "cordova-plugin-file": "^6.0.1"

功能调用 - >
this.selectImage（this.camera.PictureSourceType.CAMERA）;

fuction call here ->this.selectImage(this.camera.PictureSourceType.CAMERA);

selectImage(selection: any) {
var options: any;

options = {
  quality: 75,
  destinationType: this.camera.DestinationType.DATA_URL,
  sourceType: selection,
  allowEdit: true,
  encodingType: this.camera.EncodingType.JPEG,
  saveToPhotoAlbum: false
};

this.camera.getPicture(options).then((imgUrl) => {

  if (options.destinationType == this.camera.DestinationType.FILE_URI) {
    console.log(imgUrl,'if');
    var sourceDirectory = imgUrl.substring(0, imgUrl.lastIndexOf('/') + 1);
    var sourceFileName = imgUrl.substring(imgUrl.lastIndexOf('/') + 1, imgUrl.length);
    sourceFileName = sourceFileName.split('?').shift();
    this.File.copyFile(sourceDirectory, sourceFileName, cordova.file.externalApplicationStorageDirectory, sourceFileName).then((result: any) => {
      this.imageNewPath = result.nativeURL;

      // do api call here

    }, (err) => {
      console.log(JSON.stringify(err));
    })
  }
  else {
    console.log(imgUrl,'else');
    this.imageNewPath = "data:image/jpeg;base64," + imgUrl;
    //do here
  }
}, (err) => {
  console.log("Error in choosing image :" + JSON.stringify(err));
});

}

这篇关于上传图片离子3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！