如何在 Nativescript Vue 中上传文件

Question

我正在使用 NativeScript Vue 2 (NativeScript 4.2.2)。

我需要通过 API 将应用程序中的文件上传到 PHP 服务器。

这是我使用的代码...服务器似乎将“文件”作为“[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 coeperint apparari vel distributio sollemnium sportsularum, anxia deliberatione tractatur an exceptionis his quibus vicissitudo debetur, peregrinum invitari conveniet, et si digesto plene consilio id placuerit fieri, is adhibetur qui pro domibus excubat aurigarum aut artem tesserariam profitetur aut secretiora quaedam se nosse confingit。

Answer 1

常规 XHR (axios) 请求不支持多部分内容类型。有一个open feature request，您可能想注册您的投票并订阅该问题以获取更多更新。

同时解决方法是将您的文件内容发布为 base64 字符串或使用支持多部分上传的nativescript-background-http 插件。