1、文件下载
调用后端接口返回文件流。前台解析
axios({
method: 'get',
url: `/Download/ExportUserTemplate`,
headers:{
'Content-Type':'multipart/form-data',//contenttype要设置
token:token//后台要此判断权限
},
responseType: "blob" //必须设置,不然导出的文件无法打开,会提示没有权限什么的
}).then((data)=>{
let blob = new Blob([data.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'//下载excel,这个type有很多值可选,为解析的文件设置类型
});
let objectUrl = URL.createObjectURL(blob);
window.location.href = objectUrl; //直接下载
})
2、文件上传,用的是element的upload,考虑用户体验度采用手动上传
<el-upload
ref="upload"
class="upload-demo"
drag
show-file-list
:limit="1"
action="#"//这里随便写个字符串
:http-request="uploadHttpRequest"//覆盖默认的上传行为
:auto-upload="false" //是否在选取文件后立即进行上传
accept=".xls, .xlsx">
//:data="uploadParam"
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
<div class="submit" @click="submit">确 定</div>
// 自定义上传方法,param是默认参数,可以取得file文件信息
uploadHttpRequest(param) {
//可以打印一下看看param,console.log(param)
const formData = new FormData() //FormData对象,添加参数只能通过append('key', value)的形式添加
formData.append('File', param.file) //添加文件对象
axios({
method: 'post',
url: `/Upload/ImportCustomer`,
headers:{
'Content-Type':'multipart/form-data',
token:token
},
data:formData,
responseType: "blob"
}).then( res => {
//这里是后端直接返回给一个文件流是上传报告,在下面是继续解析然后下载报告
let blob = new Blob([res.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
let objectUrl = URL.createObjectURL(blob);
this.importFileDialogVisible = false
this.$message({
message: '上传成功',
type: 'success'
});
window.location.href = objectUrl;
})
.catch( err => {
console.log('失败', err)
})
},
submit(){
this.$nextTick(() => {
this.$refs.upload.submit()
})
},