Angular2上传XLSX至Flask API后Excel无法读取的问题求助

我帮你分析下导致Excel文件上传后损坏的核心原因，以及对应的修复方案：

核心问题分析 #

• 前端文件处理逻辑错误：你通过readAsDataURL读取文件后，将base64编码解码成字符串再发送，这个过程会丢失二进制文件的原始字节信息——字符串编码（如UTF-8）无法完整保留所有二进制字节，直接导致文件损坏。
• 请求头配置错误：你设置了Content-Type: application/json，但实际发送的是二进制数据，这会让服务器错误解析请求体；同时Accept头用于指定客户端接受的响应类型，上传文件时无需设置该字段。
• 无效的跨域头设置：前端请求中携带的Access-Control-Allow-Origin等头信息是服务器返回给客户端的，前端主动发送这些头不仅无效，还可能干扰请求正常处理。

修复方案 #

1. Angular端代码修改 #

无需使用FileReader处理文件，直接利用FormData（文件上传的标准方式）发送原始文件对象，避免二进制数据损坏：

fileChange(event){
  const file = event.target.files[0];
  this.filename = file.name;
  this.is_file = false;
  
  const token = localStorage.getItem('token');
  const formData = new FormData();
  formData.append('excel_file', file); // 键名需与后端接收时的名称对应

  const headers = new Headers({
    'Authorization': 'bearer ' + token
    // 无需手动设置Content-Type，浏览器会自动添加multipart/form-data及边界符
  });
  const options = new RequestOptions({ headers: headers });

  const ran = Math.floor(Math.random() * 10000) + 1;
  this.http.post(
    `${environment.API_URL}/test/model/expsoure/excel/model_id?cache=${ran.toString()}`,
    formData,
    options
  ).subscribe(service_data => {
    console.log('文件上传成功');
  });
}

2. Flask端代码修改 #

前端用FormData上传后，后端需要从request.files中获取文件对象，而非直接读取request.data：

class exposureExcelId(Resource):
    method_decorators = [jwt_required()]
    def post(self, mid):
        user_id = str(current_identity.id)
        # 从request.files中获取上传的文件，键名需与前端的'excel_file'对应
        excel_file = request.files.get('excel_file')
        if excel_file:
            # 直接用save方法保存文件，或手动读取二进制内容写入
            excel_file.save('/Users/data/wtf.xlsx')
            # 手动写入方式示例：
            # with open('/Users/data/wtf.xlsx', 'wb') as f:
            #     f.write(excel_file.read())
        return {'message': '文件保存成功'}

方案说明 #

FormData是浏览器专为文件上传设计的格式，能完整保留文件的二进制数据，不会出现编码丢失问题；Flask的request.files会正确解析multipart/form-data格式的请求，提取出完整的原始文件对象，保存后即可正常打开。

内容的提问来源于stack exchange，提问作者Tampa