Как загрузить файл в Nativescript Vue - PullRequest
Новая
       29

Как загрузить файл в Nativescript Vue

0 голосов
/ 15 ноября 2018

Я работаю с NativeScript Vue 2 (NativeScript 4.2.2).

Мне нужно загрузить файл из приложения на сервер PHP через API.

Это код, который я использую ... сервер, похоже, получает "file" как "[object Object]". 

<template>
    <Page>
      <StackLayout class="btn btn-grey" @tap="selectPicture()">
        <Label text="upload"></Label>
      </StackLayout>
      
      <Button class="btn btn-primary" text="Submit" @tap="submit()"></Button>
    </Page>
</template>

<script>
import {Image} from 'tns-core-modules/ui/image';
import {File, knownFolders, path} from 'tns-core-modules/file-system';
import {ImageSource} from 'tns-core-modules/image-source';

import * as camera from 'nativescript-camera';
import * as imagepicker from 'nativescript-imagepicker';

export default {
  data() {
    return {
      value: null,
    };
  },
  methods: {
    selectPicture() {
      const context = imagepicker.create({
        mode: this.multiple ? 'multiple' : 'single',
        minimumNumberOfSelection: 1,
        maximumNumberOfSelection: 1,
      });

      context
        .authorize()
        .then(() => context.present())
        .then((selection) => {
          selection.forEach((selected) => {
            let imageSource = new ImageSource();

            imageSource.fromAsset(selected)
              .then(() => {
                if (selected.android) {
                  this.saveFile(selected.android.toString());
                } else {
                  const ios = selected.ios;

                  if (ios.mediaType === PHAssetMediaType.Image) {
                    const opt = PHImageRequestOptions.new();
                    opt.version = PHImageRequestOptionsVersion.Current;

                    PHImageManager.defaultManager()
                      .requestImageDataForAssetOptionsResultHandler(ios, opt, (imageData, dataUTI, orientation, info) => {
                      this.saveFile(info.objectForKey('PHImageFileURLKey').toString());
                    });
                  }
                }
              });
          });
        });
      },
      
      saveFile(source, saveIt = false) {
        const image = new Image();
        const folderPath = knownFolders.documents().path;

        image.src = source;

        const fileName = image.src.toString().split('/').pop();
        const filePath = path.join(folderPath, fileName);
        
        if (saveIt) {
          const imageSource = new ImageSource();
          const saved = imageSource.saveToFile(filePath, 'png');

          if (!saved) {
            console.log('[UploadFile] - Cannot save file!');
          }
        }
        
        this.value = File.fromPath(filePath);
        console.log('[UploadField] -->', fileName);
      },
      
      submit() {
        const params = new FormData();
        params.append('file', this.value);
      
        axios({
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          method: 'POST',
          params,
        })
          .then((response) => console.log(response));
      },
  },
  

};
</script>

Cum autem commodis intervallata temporibus convivia longa et noxia copperint apparari vel Distribution Sollemnium sportularum, тревога обдуманного тракта и исключительного состояния его quibus vicissitudo debetur, peregrinum invitari обычный, и др. артем тессерариам профитур аут секретиора кведам се носсе конфинжит.

1 Ответ

0 голосов
/ 15 ноября 2018

Тип содержимого Muti-part не поддерживается обычным запросом XHR (axios). Существует открытый запрос функции , вы можете зарегистрировать свой голос и подписаться на проблему для дальнейших обновлений.

В то же время, обходной путь заключается в том, чтобы ЗАПИСАТЬ содержимое вашего файла в виде строки base64 или использовать nativescript-background-http плагин, который поддерживает загрузку из нескольких частей.

...