目录
一、上传文件
二、下载文件
vue3对接后端进行文件上传和下载。
一、上传文件
点击上传资料按钮，选择文件，进行上传。
创建一个proFile.vue，文件，这个文件可以作为一个子组件在其他页面引用。
组件用的element-Plus的ElMessageBox, ElLoading，以及el-upload，el-button。
style 用的lang="less"。
proFile.vue：
<template><div class="profileContainer"><div class="upload"><div class="btnStyle"><div class="eduData">上传资料</div></div><el-uploadclass="upload-demo"action="":http-request="handleUpload":before-upload="beforeUpload":on-change="(file, fileList) => {handleChanges(file, fileList);}"v-model="upload":show-file-list="false":on-preview="handlePreview"><el-button size="default" type="primary" class="hidddenBtn">上传资料 </el-button></el-upload></div></div>
</template><script setup>
import { reactive, toRefs, computed } from "vue";
import { ElMessageBox, ElLoading } from "element-plus";const state = reactive({upload: [],loading: false,
});
const { upload, loading } = toRefs(state);// 弹框
const message = (info) => {return ElMessageBox.confirm(`${info}`, {confirmButtonText: "确定",showCancelButton: false,type: "warning",}).then(() => true,() => false);
};// 更改上传路径,覆盖默认的上传行为，可以自定义上传的实现
const handleUpload = (paramFile) => {let param = new FormData();param.append("file", paramFile.file);param.append("uid", paramFile.file.uid);uploadFile(param);return Promise.resolve();
};const uploadFile = async (param) => {const loading = ElLoading.service({lock: true,text: "正在上传中，请耐心等待，谢谢！",background: "rgba(0, 0, 0, 0.5)",});//reqFileUpload，换成你自己的后端接口let result = await reqFileUpload(param);if (result.error_code == 0) {loading.close();//上传成功} else {loading.close();//上传失败}
};// 上传前触发，判断文件是否符合大小要求，当前设定大小为50M
const beforeUpload = (file, fileList) => {const isLt2M = file.size / 1024 / 1024 < 50;// 文件大小限制if (!isLt2M) {ElMessageBox.confirm(`上传文件大小不能超过 500MB! 请重新上传~`, {confirmButtonText: "确定",showCancelButton: false,type: "warning",}).then(() => true,() => false);fileList.splice(-1, 1); //移除当前超出大小的文件return false;}return isLt2M;
};// 文件改变触发
const handleChanges = (file, fileList) => {state.upload = fileList;
};
</script><style lang="less" scoped>
.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;
}
</style>
二、下载文件
从后端获取到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)}
};
