全栈任务：用vuejs和flask写一个下载的组件

Question

各位高手，我有一个比较特别的需求，
我在页面中有个a标签的文件名，用v-model绑定了一个文件id号，链接，点击后下载对应文件（我对应的文件都是以id号命名的）
本人纯业余学习vuejs+flask，只想完成一个公益网站，这个网站对社会很有意义，我之前只会增删改查，遇到这种文件上传下载就纯懵逼，我查了网站很多资料，都没有特别匹配我flask和vuejs。
希望各位多帮忙，帮我写个demo，代码能简单就简单，难的话我也看不懂，希望加注释，包括你大概的思路，用了哪些模块或者组件。
我的微信是15205166002，可以加微信交流在线指导。

Answer 1

前端：
this.$axios.get('/api/uploads',{responseType: 'blob'}).then(function(res){
var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
var contentDisposition = res.headers['content-disposition']; //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
var patt = new RegExp("filename=([^;]+\.[^\.;]+);*");
var result = patt.exec(contentDisposition);
var filename = result[1];
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
var reg = /^"["]$/g;
downloadElement.style.display = 'none';
downloadElement.href = href;
downloadElement.download = decodeURI(filename.replace(reg,"$1")); //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
})

后端：
@app.route('/uploads',methods=["GET", "POST"])
def download2():

需要知道2个参数, 第1个参数是本地目录的path, 第2个参数是文件名(带扩展名)

directory = os.path.join(app.root_path,'uploads')
filename="222.jpg"
response = make_response(send_from_directory(directory, filename, as_attachment=True))
response.headers["Content-Disposition"] = "attachment; filename={}".format(filename.encode().decode('latin-1'))
return response