Question

我想将文件从angularjs 2 app上传到我的python服务器应用程序。

formData在发送到服务器之前看起来很完美。包含名称和文件数据。

另一端是等待接受文件数据的Python API。但我没有得到数据。调试器PDB被激活，因为发送是由angularjs 2 app完成的，但我错过了文件数据。

我可能做错了什么？

upload.service.ts

import {Injectable} from 'angular2/core';   
import {Http, Headers} from 'angular2/http';

@Injectable()
export class UploadService {

  constructor(private http: Http) { }

  uploader(files: any) {
    let xhr = new XMLHttpRequest();
    const formData = new FormData();
    for(var i = 0; i < files.length; i++){
       formData.append(files[i].name, files[i]);
    }
    var headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data');

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
          if (xhr.status === 200) {
              resolve(JSON.parse(xhr.response))
          } else {
              reject(xhr.response)
       }
     }
   }
   xhr.open('POST','http://192.168.1.205:5000/zino', true)
   xhr.send(formData)
 }

}

python flask API调试器

如您所见，request.values为空：（

  <Request 'http://192.168.1.205:5000/zino' [POST]>
  (Pdb) request.values
  CombinedMultiDict([ImmutableMultiDict([]), ImmutableMultiDict([])])

Answer 1

这是RC angular2的一个工作示例

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';

@Injectable()
export class UploadService {

  constructor(private http: Http) { }

  uploader(files: any) {
    let xhr = new XMLHttpRequest()
    const formData = new FormData()
    for(var i = 0; i < files.length; i++){
      formData.append(files[i].name, files[i])
    }

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
          if (xhr.status === 200) {
              //resolve(JSON.parse(xhr.response))
          } else {
              //reject(xhr.response)
        }
      }
   }
   xhr.open('POST','/server/upload-api', true)
   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
   xhr.send(formData)
 }
}

在python端，您可以找到

中的文件

(Pdb) req.httprequest.files
ImmutableDict({'IMGP0269.jpg': <FileStorage: u'IMGP0269.jpg' ('image/jpeg')>, 'IMGP0270.jpg': <FileStorage: u'IMGP0270.jpg' ('image/jpeg')>})

Answer 2

您的请求是否跨域？如果是这样，你需要在Python方面为此做好准备。

用于发送文件的XMLHttpRequest不会将数据发送到服务器

2 个答案: