vue获取上传文件路径_在Vue中实现上传下载文件操作
在Vue中实现上传下载文件操作
1、上传操作
利用Element实现上传组件，注意这块由于是独立于axios之外的请求，需要独立配置请求头，Element的Upload还需要将with-credentials设置为true这样上传文件的时候才会带上cookie信息才能上传成功。下面是代码
HTML:
:headers="headers"
class="upload-demo"
:action="action"
:with-credentials='true'
multiple
:limit="limitNum"
:on-success='successFun'
>
点击上传
JavaScript:
mounted() {
this.headers['X-CSRFToken'] =this.getToken()
//this.uploadUrl是后台上传接口
this.action='http://127.0.0.1:8000'+this.uploadUrl
}
methods: {
// 利用正则获取cookie中的token信息
getToken() {
letregex= /.*cwcsrftoken=([^;.]*).*$/;
returndocument.cookie.match(regex) ===null?null:document.cookie.match(regex)[1];
}
}
Python代码就是获取上传的文件进行切割拼接加入时间戳防止文件名重复，使用os.path保存文件到upload中，然后返回文件路径。方便存储和访问文件。
fromdjango.shortcuts importHttpResponse
fromdjango.utils.encoding importescape_uri_path
importos
defxls_upload(request):
obj =request.FILES.get('file')
t =time.strftime('%Y%m%d%H%M%S')
name =obj.name.split('.')[0] +t +'.'+obj.name.split('.')[1]
path =os.path.join('upload',name)
f =open(path,'wb')
forline inobj.chunks():
f.write(line)
f.close()
returnrender_json({'result':True,'data': {'upPath': path}})
2、下载操作
2.1、 前端下载
2.1.1、 表格下载为csv文件
获取表格数据组合成，号分割的字符串 然后Unicode编码放入a标签中触发a标签下载文件
HTML：
下载
JavaScript：
downFun2() {
letaddobj={}
// 2.1获取表头内容 以rowData形式重新赋值
this.tableLable.map((v, i) =>{
addobj['rowData'+i] =v
})
// 2.2用JSON转义清理对象的内存地址关联 来获取表格数据
lettableData=JSON.parse(JSON.stringify(this.tableData))
// 2.3把表头添加到表格数据的最前面充当表头
tableData.unshift(addobj)
// 2.4列标题，逗号隔开，每一个逗号就是隔开一个单元格
letstr=``;
// 2.5增加\t为了不让表格显示科学计数法或者其他格式
for(leti=0; i< tableData.length; i++) {
for(letitemintableData[i]) {
// 2.5.1 注意要将本身就有换行或者英文逗号的内容进行变换 否则表格内容会错乱
tableData[i][item] =tableData[i][item].replace(/\n/g, ' ')
tableData[i][item] =tableData[i][item].replace(/,/g, '，') // 英文替换为中文
str+=`${tableData[i][item] +'\t'},`;
}
str+='\n';
}
// 2.6encodeURIComponent解决中文乱码
leturi='data:text/csv;charset=utf-8,\ufeff'+encodeURIComponent(str);
// 2.7通过创建a标签实现
letlink=document.createElement('a');
link.href=uri;
// 2.8对下载的文件命名
link.download=this.fileUrl;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
2.1.2、 下载为Excel文件
这里使用了一个Export2Excel.js、Blob.js的文件进行处理 下载该文件放入项目中HTML类似上面csv下面是JavaScript代码：
export2Excel() {
require.ensure([], () =>{
// 这里是Export2Excel.js文件路径 ,必须根据实际情况修改
const{export_json_to_excel} =require('../excel/Export2Excel');
// 设置表格表头字段
letfilterVal=[];
for(letiteminthis.tableData[0]) {
filterVal.push(item)
}
constdata=this.formatJson(filterVal, this.tableData);
export_json_to_excel(this.tableLable, data, this.fileUrl);
})
},
formatJson(filterVal, jsonData) {
returnjsonData.map(v=>filterVal.map(j=>v[j]))
}
2.2、 后端下载
其实后端下载最简单的方法就是把后端下载的链接放入a标签中点击a标签下载，或者使用window.location.href访问后台链接触发。
下面是示例：
下载文件
或者是JavaScript：
window.location.href="127.0.0.1:8000/fileDown/?url=upload/index.html"
后端代码：
deffile_down(request):
url =request.GET.get('url')
ifurl isNone:
returnrender_json({'result': False, 'data': '请传入文件路径参数url'})
name_li =url.split('\\')
file_name =name_li[-1]
f =open(url,'rb')
response =HttpResponse(f)
response['Content-Type']='application/octet-stream'
response['Content-Disposition']="attachment;filename*=utf-8''{}".format(escape_uri_path(file_name))
returnresponse