SpringBoot+Vue3實現(xiàn)文件上傳功能

SpringBoot+Vue3實現(xiàn)文件上傳功能，后端開發(fā)一個SpringBoot通用上傳接口，前端使用Vue3的上傳組件。

| 喜歡聽我叨叨的，直接看視頻?|

01

實現(xiàn)思路

1. 前端上傳組件，html自帶的file，Vue上傳組件

?https://2x.antdv.com/components/upload-cn#components-upload-demo-avatar

2. 后端接收，將圖片保存到文件夾

????SpringBoot通用的上傳文件接口

3. 前端顯示圖片，將文件夾路徑轉(zhuǎn)為url

????D:/file/wiki/xxx.jpg

????D:/file/wiki/是文件目錄

????localhost:8880/file/xxx.jpg

02

相關(guān)代碼

后端接口

@RequestMapping("/upload/avatar")
public?CommonResp?upload(@RequestParam?MultipartFile?avatar)?throws?IOException?{
????LOG.info("上傳文件開始：{}",?avatar);
????LOG.info("文件名：{}",?avatar.getOriginalFilename());
????LOG.info("文件大小：{}",?avatar.getSize());

????//?保存文件到本地
????String?fileName?=?avatar.getOriginalFilename();
????String?fullPath?=?"D:/file/wiki/"?+?fileName;
????File?dest?=?new?File(fullPath);
????avatar.transferTo(dest);
????LOG.info(dest.getAbsolutePath());

????return?new?CommonResp();
}

HTML：

<a-upload
????????v-model:file-list="fileList"
????????name="avatar"
????????list-type="picture-card"
????????class="avatar-uploader"
????????:show-upload-list="false"
????????:action="SERVER?+?'/ebook/upload/avatar'"
????????:before-upload="beforeUpload"
????????@change="handleChange"
>
??<img?v-if="imageUrl"?:src="imageUrl"?alt="avatar"?/>
??<div?v-else>
????<loading-outlined?v-if="coverLoading">loading-outlined>
????<plus-outlined?v-else>plus-outlined>
????<div?class="ant-upload-text">Uploaddiv>
??div>
a-upload>

JS：

function?getBase64(img:?Blob,?callback:?(base64Url:?string)?=>?void)?{
????const?reader?=?new?FileReader();
????reader.addEventListener('load',?()?=>?callback(reader.result?as?string));
????reader.readAsDataURL(img);
}

………………

const?SERVER?=?process.env.VUE_APP_SERVER;
const?fileList?=?ref([]);
const?coverLoading?=?ref(false);
const?imageUrl?=?ref('');

const?handleChange?=?(info:?any)?=>?{
??if?(info.file.status?===?'upcoverLoading')?{
????coverLoading.value?=?true;
????return;
??}
??if?(info.file.status?===?'done')?{
????//?Get?this?url?from?response?in?real?world.
????getBase64(info.file.originFileObj,?(base64Url:?string)?=>?{
??????imageUrl.value?=?base64Url;
??????coverLoading.value?=?false;
????});

????ebook.value.cover?=?SERVER?+?"/file/"?+?info.file.name;
??}
??if?(info.file.status?===?'error')?{
????coverLoading.value?=?false;
????message.error('upload?error');
??}
};

const?beforeUpload?=?(file:?any)?=>?{
??const?isJpgOrPng?=?file.type?===?'image/jpeg'?||?file.type?===?'image/png';
??if?(!isJpgOrPng)?{
????message.error('You?can?only?upload?JPG?file!');
??}
??const?isLt2M?=?file.size?/?1024?/?1024?2;
??if?(!isLt2M)?{
????message.error('Image?must?smaller?than?2MB!');
??}
??return?isJpgOrPng?&&?isLt2M;
};

—————— THE END??——————

掃碼關(guān)注，好文不錯過