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