vue实现前后端⽂件的上传和下载
⼀、背景
在项⽬中除了⼀般的数据传送以外，剩下的核⼼部分就是⽂件、视频的传送问题以及⽤户状态权限等。根据实际的项⽬需求，这⾥记录⼀下vue+flask的⽂件传送⽅式，其他的语⾔也类似。
⼆、上传
上传内容以前端为主动，后端和服务器为被动
2.1 前端
上传这⾥使⽤了element-ui的upload组件，或者使⽤fetch进⾏处理，可以直接参考upload组件的参数就可以完成⽂件的上传。
// 直接给出上传服务器就可
<el-upload
class="upload-demo"
ref="upload"
action="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
@ute('/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 = de;
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 = ateObjectURL(blob);
// console.log(url)
let a = ateElement("a");
document.body.appendChild(a);
a.href = url;
a.download = decodeURI(fileName); //命名下载名称
a.click(); //点击触发下载
vokeObjectURL(url);  //下载完成进⾏释放
}
}
).catch(error => {
// console.log("请求超时！请重试！");
this.$message({
message: '下载失败！请重试！',
type: 'error',
duration: 1000,
});
})
},
3.2 后端
使⽤发送对象⽂件的⽅式将⽂件信息传给前端，后端使⽤send_file的⽅式。
@ute('/download', methods=["GET", "POST"])
def download_file():
param = request.json
# 获取⽂件名
file_name = ('fileName')flask下载
if file_name:
# attachment_filename="", 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的代理去实现，与视频的实现类似。参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。