python - Angular js上传文件功能无法按预期工作

Question

使用Angular实现上传文件功能，Flask作为后端服务器。但是，当我尝试上传文件时，总是收到错误消息。这是代码。

HTML 元素:

        <input class="paper-trade__upload-button_hidden" type="file" id="csv-upload" name="file" accept=".csv" ngf-max-size="2MB" (change)="csvToArray($event)">

Angular :

    csvToArray(fileInput: any) {
    const hotInstance = this.hotRegisterer.getInstance(this.instance);
    let fileReaded = fileInput.target.files[0];
    this.tradeCaptureService.uploadPaperTradeCSV('KGI', 
    fileReaded).subscribe();
    }

请求正文:

uploadPaperTradeCSV(brokerName: string, file): Observable<Trade> {
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'multipart/form-data',
  }),
};
let formData: FormData = new FormData();
formData.append('file', file);

return this.http.post<Trade>(`${this.baseUrl}/trade/upload?broker_name=${brokerName}`, formData, httpOptions)
  .pipe(
    tap(data => console.log(data)),
);

}

后端代码(python):根据request.files的要求，将文件数据以form-data形式发送

    @hello.route('/upload', methods=['POST'])
@jwt_required
def import_trades():
    if request.method == 'POST':
        broker_name = request.args.get('broker_name', '')
        data = request.form.get('file')

        if 'file' not in request.files:
            return jsonify({'fail': 'no file found'})
        file = request.files['file']
        if not file.filename:
            return jsonify({'fail': 'no file selected'})
        file_format = file.filename.split('.', 1)[1].lower()
        allowed_extension = set(['csv'])
        if file and file_format in allowed_extension:
            filename = secure_filename(file.filename)
            file_path = os.path.join(UPLOAD_FOLDER, filename)
            file.save(file_path)
            response = trade_orm.convert_file_data(broker_name, file_path)
            if os.path.exists(file_path):
                os.remove(file_path)
            return response
        else:
            return jsonify({'fail': 'please input valid info'})

但是我尝试上传文件，它总是返回“找不到文件”消息。使用 Postman 发送请求时购买，它工作正常。我在这里卡了很长一段时间......任何帮助将不胜感激，感谢您的帮助

Answer 1

我终于找到了这个问题的解决方案，删除 uploadPaperTradeCSV() 方法中的 'const httpOptions = {}' 人员，然后就可以正常工作了。所以新代码将是这样的

uploadPaperTradeCSV(brokerName: string, file): Observable<Trade> {

let formData: FormData = new FormData();
formData.append('file', file);

return this.http.post<Trade>(`${this.baseUrl}/trade/upload?broker_name=${brokerName}`, formData, httpOptions)
  .pipe(
    tap(data => console.log(data)),
);

但我还是不明白为什么......