这里介绍的是第一种方式，在本地进行存储

搭建一个本地存储

前端vue：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://unpkg.com/vue@next"></script> <!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>--><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script><!-- Import style --><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" /><!-- Import component library --><script src="//cdn.jsdelivr.net/npm/element-plus"></script><style type="text/css">.div {background-color: aqua;width: 100px;height: 100px;}</style></head><body><div id="app"><el-uploadclass="upload-demo"drag:on-success="filesuccess"<!-- 文件上传成功的 -->action="http://127.0.0.1:8080/fileupload"multiple><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></div><script>const App = {// 定义的变量data() {return {}},methods: {filesuccess(response,file,fileList){console.log("success")console.log(response)}}};Vue.createApp(App).use(ElementPlus).mount('#app');</script></body>
</html>

后端代码：

package com.mybatis.mybatis.controller;import com.mybatis.mybatis.utils.Result;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.util.UUID;@CrossOrigin
@RestController
public class FileUploadController {@PostMapping("fileupload")public Result fileupload(MultipartFile file){//        接收到了前端的请求System.out.println("file:"+file.getOriginalFilename());//      UUID生成随机数，起到重名保护作用String filename = UUID.randomUUID().toString()+file.getOriginalFilename();//        将前端文件  保存到本地try {file.transferTo(new File("D:/D_ temporary/", filename));} catch (IOException e) {e.printStackTrace();}//            将本地文件路径返回给前端return Result.ok(filename);}
}

解决静态资源访问问题：修改后端application.properties 根据自己spring版本号

#静态资源配置   spring版本2.3.7使用如下配置
spring.resources.static-locations=file:D:/D_ temporary/#静态资源配置   spring版本2.5.5使用如下配置
spring.web.resources.static-locations=file:D:/D_ temporary/

前端代码解析

最后注意一点，这个组件上传的文件不能超过500kb，格式也限制为jpg/png，要可以去找其他模块满足更大的需求。

可以访问以下官网寻找更多的组件

https://element.eleme.cn/#/zh-CN/component/upload

脚手架如何引入Element-Plus

文档地址：https://element.eleme.cn/#/zh-CN/component/tag

进入控制台（cmd输入vue ui），点击插件，添加插件

安装红框所示的插件

修改main.js即可

【javaEE】(13)——本地文件存储头像上传相关推荐

php文件用户头像上传代码,网页web上传用户头像代码实现（美图秀秀开放）
网页web上传用户头像代码实现(美图秀秀开放) 在制作论坛或者一些门户社交网站的时候,经常要获取用户的头像.之前我们一般都是自己制作flash插件头像上传.或者用js来自己开发一个头像上传功能.比如有 ...
调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
Amazon S3文件存储的上传下载如何测试
相信肯定有不少小伙伴的公司用到了S3,而且在测试的过程中如何去进行测试的呢,下面通过一篇文章带你入门S3的测试. S3是什么? Amazon Simple Storage Service (Amazo ...
如何将本地文件通过终端上传到linux服务器 /服务器/阿里云
scp -P 端口 c://xxxx.txt user@ip:/home/root 注意: -P 大写 -i 公钥 (我是将文件上传到阿里云) (1)在本地的终端下,而不是在服务器上.在本地的终端上才 ...
xshell上传本地文件命令_XShell上传、下载本地文件到linux服务器
Xshell很好用,然后有时候想在windows和linux上传或下载某个文件,其实有个很简单的方法就是rz,sz. 首先你的Linux上需要安装安装lrzsz工具包,(如果没有安装请执行以下命令,安 ...
如何将本地文件通过终端上传到apache上(压缩文件)
1.scp 文件路径\文件名(zip) root@ip地址:/home/admin(选择传输的文件夹) 2.ssh root@ip地址(登录) 3.cd / 回到根目录 4.cd home/ad ...
若依前后端分离版源码分析-前端头像上传后传递到后台以及在服务器上存储和数据库存储设计
场景使用若依前后端分离版本时,分析其头像上传机制. 可作为续参考学习. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获 ...
layui文件上传(头像上传)
头像上传头像上传大概流程就是选择电脑上的文件图片然后上传到服务器服务器存起来然后上传到浏览器中,服务器需要用到磁盘存储模块(multer),需要下载安装 multer是Nodejs中用于处理文件上传 ...
springboot 头像上传文件流保存文件流返回浏览器查看区分操作系统 windows 7 or linux...
1 //我的会员中心头像上传接口 2 /*windows 调试*/ 3 @Value("${appImg.location}") 4 private String winPath ...

【javaEE】(13)——本地文件存储头像上传

这里介绍的是第一种方式，在本地进行存储

搭建一个本地存储

前端代码解析

可以访问以下官网寻找更多的组件

脚手架如何引入Element-Plus

【javaEE】(13)——本地文件存储头像上传相关推荐

最新文章

热门文章

【javaEE】(13)——本地文件存储 头像上传

这里介绍的是第一种方式，在本地进行存储

搭建一个本地存储

前端代码解析

可以访问以下官网寻找更多的组件

脚手架如何引入Element-Plus

【javaEE】(13)——本地文件存储 头像上传相关推荐

最新文章

热门文章

【javaEE】(13)——本地文件存储头像上传

【javaEE】(13)——本地文件存储头像上传相关推荐