话不多说-直接上代码-亲测好用
文件上传
Vue中代码
<!-- 修改头像action:上传头像的地址name:上传头像的名称limit：设置上传头像的数量on-remove 文件列表移除文件时的钩子on-preview 点击文件列表中已上传的文件时的钩子
--><el-uploadclass="upload-demo"name="file"action="http://localhost:9080/upload":on-success="success":on-preview="handlePreview":on-remove="handleRemove":limit="1":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">修改头像</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload>methods: {//头像上传 BhandleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},// 头像上传成功的钩子success(response, file, fileLis){this.url=response;console.log(response)}// 头像上传 End},
@RequestMapping("/upload")public String update(MultipartFile file) throws IOException {//file 代表客户端上传的文件参数System.out.println("上传文件成功"+file);String filename = file.getOriginalFilename();System.out.println("原始文件名"+filename);// 得到原始文件名的后缀String substring = filename.substring(filename.lastIndexOf("."));filename = UUID.randomUUID()+substring;System.out.println(filename);//准备保存文件的路径String filePath = "d:/image";File dirfile = new File(filePath);if (!dirfile.exists()){dirfile.mkdirs();//创建文件夹}//得到完整路径 ../avatar/xxx.jpgString filePathto = dirfile + "/" + filename;//把图片保存到上面的路径中 异常抛出file.transferTo(new File(filePathto));String result="http://localhost:9080/"+filename;System.out.println(result);return result;}
# 配置静态资源文件夹classpath:static 指的是原来的Static文件夹
spring:web:resources:static-locations: file:d:/image
有问题评论区留言…
