图片上传、显示

古城微笑少年丶 2023-06-03 08:58 2阅读 0赞

后端代码

@ApiOperation("上传图片")
    	@PostMapping("/upload")
    	public String upload(@RequestBody MultipartFile file) throws Exception {
    		String result = "";
    		if (file.isEmpty()) {
    			throw new Exception("文件不存在！");
    		}
    		String fileName = file.getOriginalFilename();
    		String fileType = fileName.substring(fileName.lastIndexOf("."), fileName.length());
    		String newFileName = CodeUtil.generateUUID() + fileType;
    		File newFile = new File("C:/Users/public/", newFileName);//上传路径
    		file.transferTo(newFile);
    		result = newFileName;
    		return result;
    	}

前端vue代码

列表中显示：

<el-table-column label="图片" prop="photos" resizable show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-for="photo in scope.row.photos" :key="photo">
                    　<img :src="'images/upload/'+photo" width="60" height="60" class="head_pic" />
                  </span>
                </template>
              </el-table-column>

修改或上传（el组件 https://element.eleme.cn/\#/zh-CN/component/upload）

<el-form-item label="图片列表：" :label-width="formLabelWidth">
              <el-upload action="http://127.0.0.1:8000/upload" list-type="picture-card" :file-list="files" :on-success="handleAvatarSuccess" :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spring Boot上传文件/图片&图片显示

一、文章前言 1. 本文章主要讲述如何在spring boot下上传文件，尤其是上传图片并显示，例如用户注册的时候上传了头像，此时头像会加载在注册页面上面，在Spri...

左手的ㄟ右手/ 2024年04月17日 20:49/ 0 赞/ 80 阅读

相关 base64图片上传，并显示图片，

<a href="javascript:;" class="file">选择文件 <input type="hidden" id="files-button"

刺骨的言语ヽ痛彻心扉/ 2023年08月17日 16:38/ 0 赞/ 175 阅读

相关图片上传、显示

后端代码 @ApiOperation("上传图片") @PostMapping("/upload") public String upload(@

古城微笑少年丶/ 2023年06月03日 08:58/ 0 赞/ 3 阅读

相关 js图片上传并显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

淩亂°似流年/ 2022年12月13日 01:42/ 0 赞/ 249 阅读

相关 php上传图片并显示代码,php完整图片上传代码

我们的目标效果：网站后台图片上传，点击上传选择图片，上传成功之后自动把图片名称放在input文本框内！！先说使用方法吧：(代码在下方自行复制，共三个demo页) 首先，最

末蓝、/ 2022年11月18日 01:25/ 0 赞/ 315 阅读

相关 springmvc上传图片并显示--支持多图片上传

实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。开始需要在pom.xml加入几个jar,分别是： <dependency>

电玩女神/ 2022年08月20日 04:13/ 0 赞/ 351 阅读

相关图片上传并显示

问题描述： ![这里写图片描述][SouthEast] 选择了文件过后是这样的： ![这里写图片描述][SouthEast 1] 很显然，这样的按钮并不好看。

比眉伴天荒/ 2022年07月03日 12:30/ 0 赞/ 370 阅读

相关 html上传图片后，在页面显示上传的图片

html上传图片后，在页面显示上传的图片 1、html <form class="container" enctype="multipart/form-data"

爱被打了一巴掌/ 2022年06月04日 02:42/ 0 赞/ 322 阅读

相关 SpringBoot图片上传与显示

文章目录一. 前端发送文件上传的请求二. 后台接收图片上传的请求三. 对上传的图片进行前台显示

忘是亡心i/ 2022年02月25日 03:36/ 0 赞/ 313 阅读

相关 Springboot使用formdata上传图片，回传URL显示图片

1.前端通过Ajax请求将头像图片资源发送formdata的形式请求后端 1、对于写了一个下午bug的笔者，决定把在此遇到的bug都分享给大家，避免大家也像我一样踩坑，首

小鱼儿/ 2021年05月05日 03:30/ 0 赞/ 674 阅读