一、背景
在项目中除了一般的数据传送以外，剩下的核心部分就是文件、视频的传送问题以及用户状态权限等。根据实际的项目需求，这里记录一下vue+flask的文件传送方式，其他的语言也类似。
二、上传
上传内容以前端为主动，后端和服务器为被动
2.1 前端
上传这里使用了element-ui的upload组件，或者使用fetch进行处理，可以直接参考upload组件的参数就可以完成文件的上传。
// 直接给出上传服务器就可
<el-upload class="upload-demo" ref="upload" action="http://127.0.0.1:5000/user/upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="uploadFileList" :auto-upload="false">
2.2 后端
flask通过获取传过来的file对象，进行文件的存储，代码如下。
from flask import request, jsonify from werkzeug.utils import secure_filename @user.route('/upload', methods=['GET', 'POST']) def upload_file(): file_buffer = request.files['file'] f_name = secure_filename(file_buffer.filename) data = {"code": 500, "msg": "上传失败！"} try: file_buffer.save(store_file_path + f_name) data.update({"code": 200, "msg": "上传成功！"}) except FileNotFoundError as e: logging.log("error", e) return jsonify(data)
三、下载
下载内容以后端为主动，前端为被动。
3.1 前端
给出文件列表，通过请求后端的地址获取数据，在使用blob对象进行文件的下载。流程如下
总代码
downloadFile: function (filename) { this.$http.post('/api/user/download', { fileName: filename, }).then( response => { var result = response.data.code; if (result === 404) { this.$message({ message: "下载失败！", type: "error", duration: 1000, }) } else { // 这一部分可以封装成函数
const conent = response.data; const blob = new Blob([conent], {type: ""}); let fileName = response.headers["content-disposition"].split("=")[1]; if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, fileName); } console.log(fileName); // console.log(response.data);
let url = window.URL.createObjectURL(blob); // console.log(url)
let a = document.createElement("a"); document.body.appendChild(a); a.href = url; a.download = decodeURI(fileName); //命名下载名称
a.click(); //点击触发下载
window.URL.revokeObjectURL(url); //下载完成进行释放
} } ).catch(error => { // console.log("请求超时！请重试！");
this.$message({ message: '下载失败！请重试！', type: 'error', duration: 1000, }); }) },
3.2 后端
使用发送对象文件的方式将文件信息传给前端，后端使用send_file的方式。
@user.route('/download', methods=["GET", "POST"]) def download_file(): param = request.json # 获取文件名
file_name = param.get('fileName') if file_name: # attachment_filename="down.txt", as_attachment=True 附件
return send_file(store_file_path + file_name, mimetype='text/csv', attachment_filename=file_name, as_attachment=True) else: data = { "code": 404, "info": "file no found!" } return jsonify(data)
四、总结
上述内容讲述了文件上传和下载如何使用后端交互的方式，当然除了这种方式也可以使用nginx的代理去实现，与视频的实现类似。
参考