Vue3_上传文件_下载文件
目录
一、上传文件
二、下载文件
vue3对接后端进行文件上传和下载。
一、上传文件
点击上传资料按钮,选择文件,进行上传。
创建一个proFile.vue,文件,这个文件可以作为一个子组件在其他页面引用。
组件用的element-Plus的ElMessageBox, ElLoading,以及el-upload,el-button。
style 用的lang=”less”。
proFile.vue:
上传资料
{
handleChanges(file, fileList);
}
"
v-model="upload"
:show-file-list="false"
:on-preview="handlePreview"
>
上传资料
.profileContainer {
position: relative;
.upload {
position: relative;
border: none;
.btnStyle {
width: 76px;
height: 36px;
border-radius: 4px 4px 4px 4px;
padding: 0 10px;
text-align: center;
font-size: 14px;
color: #00b498;
line-height: 36px;
border: none;
margin-right: 10px;
.eduData {
width: 76px;
height: 34px;
line-height: 34px;
background: #d2ebff;
font-size: 14px;
color: #000;
border: none;
text-align: center;
border-radius: 4px 4px 4px 4px;
}
}
.hidddenBtn {
position: absolute;
left: 30px;
top: 5px;
width: 75px;
opacity: 0;
}
}
img {
position: relative;
top: 0;
width: 14px;
height: 14px;
}
.showFile {
background-color: #a6e3c5;
.fileName {
display: inline-block;
width: 140px;
height: 22px;
line-height: 22px;
background-color: #fff;
margin-right: 20px;
}
}
}
:deep(.upload-demo) {
position: relative;
top: -40px;
left: -20px;
}
:deep(.el-upload-list) {
width: 870px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
top: 5px;
left: 20px;
max-height: 85px;
}
:deep(.el-upload-list__item) {
float: left;
width: 145px;
height: 22px;
line-height: 22px;
background-color: #f8faf9;
margin-right: 20px;
}
:deep(.el-progress) {
opacity: 0;
}
:deep(.el-upload-list__item .el-icon--upload-success) {
z-index: 1000;
opacity: 1;
}
二、下载文件
从后端获取到Blob类型的文件,Blob(Binary Large Object)表示二进制类型的大对象,通常是影像、声音或多媒体文件。MySql/Oracle数据库中,就有一种Blob类型,专门存放二进制数据。在 JavaScript 中 Blob 对象表示一个不可变、原始数据的类文件对象,它不一定非得是大量数据,也可以表示一个小型文件的内容。
下载文件方法:
//从后端获取这个方法,调用这个方法下载文件,传入文件name。param是一个文件标志,获取当前文件内容
const downLoadFileSuccess = async (name, param) => {
//reqDownloadFile从后端获取文件数据的接口,param是一个文件标志,获取当前文件内容
let result = await reqDownloadFile(param);
if (result != undefined) {
//浏览器下载
const myBlob = new window.Blob([result], { type: result.type });
const qrUrl = window.URL.createObjectURL(myBlob);
var fileLink = document.createElement("a");
fileLink.href = qrUrl;
fileLink.setAttribute("download", name);
document.body.appendChild(fileLink);
fileLink.click();
} else {
console.log(result.datas_info)
}
};