简介
个人项目的内容参考，包含了通过前端发送文件和请求下载文件的代码编写。前端基于vue框架，后端基于springboot
springboot配置
上传文件
传入的文件用MultiparFile进行接收
postman：
下载文件
将需要传入的文件转换为byte数组然后返回给
ResponseEntit.contentType(MediaType.APPLICATION_OCTET_STREAM)
表示这是一个响应的二进制流，
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + filePath +
这行代码设置了 HTTP 响应头 Content-Disposition。Content-Disposition 响应头用于告诉浏览器如何处理响应的内容。在这里，它被设置为 attachment，意味着提示浏览器下载文件而不是直接展示它。filename 参数后面跟着文件的名称，这里使用了变量 filePath 来动态设置文件名。注意，文件名被放在引号内，以确保即使文件名中包含空格也能被正确处理
.body(bytes)
这行代码设置了响应体（body），即实际发送给客户端的数据。在这里，bytes 应该是一个包含文件内容的字节数组（byte[]）。这意味着服务器将发送这个字节数组作为响应体，客户端接收到后可以将其保存为文件。
直接在url中访问http://localhost:8081/image/download
前端的配置实现前后端联调
axios设置
api的编写
网页的搭建
html
<div class="upload-container">
<label
draggable="true"
for="fileInput"
class="upload-trigger"
@dragenter="handleDragEnter"
@dragover.prevent
@dragleave="handleDragLeave"
@drop="handleDrop"
>
<i class="el-icon-upload icon"></i>
<div class="upload-text">
将文件拖到此处,或<span class="drag-tip">点击上传</span>
</div>
</label>
<input
type="file"
id="fileInput"
style="display: none"
@change="handleFileChange"
/>
</div>
/**通过按钮发送文件 */
<el-button @click="uploadLSBImage">上传文件</el-button>
css
.upload-container {
flex-direction: column;
padding: 20px;
border: 2px dashed #ccc;
border-radius: 5px;
background-color: #f9f9f9;
width: 320px;
height: 160px;
cursor: pointer;
transition: border 0.3s ease;
margin-top: 20px;
}
.upload-trigger {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
width: inherit;
height: inherit;
}
.icon {
margin-top: 20px;
/* 假设你有一个上传图标的字体图标类 */
font-size: 68px;
color: #666;
}
.upload-text {
margin-top: 10px;
color: #333;
}
.upload-tip {
margin-top: 5px;
font-size: 12px;
color: #666;
}
/* 拖动 */
.upload-trigger.dragover {
border-color: #409eff; /* 文件拖拽时的边框颜色 */
}
选择文件
主要目的：从事件中保存文件和文件名
拖拽文件函数
handleDragEnter() {
// 当文件拖拽进入时改变样式
this.dragOver = true;
},
handleDragLeave() {
// 当文件拖出时重置样式
this.dragOver = false;
},
handleDrop(event) {
// 处理文件drop事件
event.preventDefault();
this.dragOver = false;
const files = event.dataTransfer.files;
if (files.length) {
this.selectedLSBFile = files[0];
this.fileName = this.selectedLSBFile.name;
}
},
选择文件函数
将事件event传入。获取到文件，然后记录下文件的名字和保存这个文件。
handleFileChange(event) {
// 当文件选择器的值发生变化时，更新selectedFile
const file = event.target.files[0];
if (file) {
console.log("change");
this.selectedLSBFile = file;
this.fileName = file.name; // 更新文件名
}
},
*发送文件
文件的包装需要使用formData以键值对的方式进行传输
solveLSBImage() {
if (this.selectedLSBFile) {
console.log("发生");
// 创建FormData对象
const formData = new FormData();
// 将图片文件添加到FormData对象中
formData.append("file", this.selectedLSBFile);
imageAPI.lsbSolve(formData).then((res) => {
console.log(res)
this.solveMessage = res.data;
});
}
},
后端对应的处理函数
结果：
上传成功
下载文件
实际就是直接通过url访问对应的接口就可以实现文件的下载
dowload(){
window.location.href='http://localhost:8081/image/download'
},