Question

我正在使用NativeScript Vue 2（NativeScript 4.2.2）。

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

这是我使用的代码...服务器似乎将“文件”作为“ [对象对象]”。

<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>

普通农作物之间的时间间隔和时间长短不等，体育运动的贫民区，普通贫民区的贫民窟，普通居民的普通居民，普通居民的日常饮食，普通普通居民的普通饮食等artem tesserariamprofitetur aut secretiora quaedam se nosse confingit。

Answer 1

常规XHR（axios）请求不支持多部分内容类型。有open feature request，您可能需要注册投票并订阅问题以进行进一步更新。

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

如何在Nativescript Vue中上传文件

1 个答案: