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

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

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

Это код, который я использую ... сервер, кажется, получает «файл» как «[объект объекта]».

<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.info('[UploadFile] - Cannot save file!');
          }
        }
        
        this.value = File.fromPath(filePath);
        console.info('[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.info(response));
      },
  },
  

};
</script>

Cum autem communis intervallata temporibus convivia longa et noxia coeperint apparari vel distributio sollemnium sportularum, Alarmia deliberatione tractatur an за исключением его quibus vicissitudo debetur, peregrinum invitari consiliet, et si digesto plene consilio idi placuerit artemuerites aut secrettiora quaedam se nosse confingit.

Удалите ненужный текст, ухудшающий качество вопроса.

SebaGra 15.11.2018 20:31

@SebaGra Хотел бы я ... Stackoverflow не позволит мне отправить без "лишнего" контента. Ударь его. :-)

Monkey Monk 16.11.2018 14:15
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
2
1 829
1

Ответы 1

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

Между тем, обходной путь - отправить содержимое файла POST в виде строки base64 или использовать плагин nativescript-background-http, который поддерживает загрузку нескольких частей.

Спасибо !! Я видел эти примеры nativescript-background-http, но никогда не видел, что это единственный обходной путь ...

Monkey Monk 16.11.2018 11:55

Другие вопросы по теме