我正在尝试从前端上传文件
servece.ts
pushFileToStorage(file: File): Observable<HttpEvent<{}>> {
const formdata: FormData = new FormData();
formdata.append('file', file);
const req = new HttpRequest('POST', 'http://localhost:8080/upload', formdata, {
reportProgress: true,
responseType: 'text'
});
return this.http.request(req);
}
我创建了一个带有flask的Web服务来保存文件,这强烈遵循了官方的flask示例:
import os
from flask import Flask, request, redirect, url_for, send_from_directory
from werkzeug.utils import secure_filename
UPLOAD_FOLDER = '/upload/'
ALLOWED_EXTENSIONS = {'pcap'}
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
@app.route('/upload', methods=['POST'])
def upload_file():
print(request.files)
# check if the post request has the file part
if 'file' not in request.files:
print('no file in request')
return""
file = request.files['file']
if file.filename == '':
print('no selected file')
return""
if file and allowed_file(file.filename):
print("hello")
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return ""
print("end")
return""
结果-没有例外,也没有文件上传 尝试通过Angular HttpClient处理上传时,flask在请求中未检测到文件
127.0.0.1 - - [10/Aug/2018 13:46:25] "OPTIONS /upload HTTP/1.1" 200 -
file-upload.html
<div *ngIf="currentFileUpload" class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" attr.aria-valuenow="{{progress.percentage}}"
aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width:progress.percentage+'%'}">
{{progress.percentage}}%</div>
</div>
<label class="btn btn-default">
<input type="file" (change)="selectFile($event)" accept=".pcap">
</label>
<button class="btn btn-success" [disabled]="!selectedFiles" (click)="upload()">Upload</button>
upload.component.ts
upload() {
this.progress.percentage = 0;
this.currentFileUpload = this.selectedFiles.item(0);
this.uploadService.pushFileToStorage(this.currentFileUpload).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.progress.percentage = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
console.log('File is completely uploaded!');
}
});
this.selectedFiles = undefined;
}
我没有问题是什么?