un7.7:如何在IDEA中实现图片上传功能并将图片展示出来？

向右看齐 2023-10-11 17:47 23阅读 0赞

在IDEA中如何实现图片的上传呢？接下来和我一起实现吧！

所需软件：

后端：IDEA

前端：HbuilderX

测试：火狐浏览器

一、在实体类中创建一个fileInfo类，定义一些属性，代码如下：

package com.xiaohui.cms.entity;
    
    public class FileInfo {
    
    	private String fileName;
    	private boolean isSecret;
    	private String absolutPath;
    	private String relativePath;
    
    	public String getFileName() {
    		return fileName;
    	}
    
    	public void setFileName(String fileName) {
    		this.fileName = fileName;
    	}
    
    	public String getAbsolutPath() {
    		return absolutPath;
    	}
    
    	public void setAbsolutPath(String absolutPath) {
    		this.absolutPath = absolutPath;
    	}
    
    	public String getRelativePath() {
    		return relativePath;
    	}
    
    	public void setRelativePath(String relativePath) {
    		this.relativePath = relativePath;
    	}
    
    	public boolean isSecret() {
    		return isSecret;
    	}
    
    	public void setSecret(boolean isSecret) {
    		this.isSecret = isSecret;
    	}
    
    	public FileInfo() {
    	}
    
    	public FileInfo(String fileName, boolean isSecret, String absolutPath, String relativePath) {
    		super();
    		this.fileName = fileName;
    		this.isSecret = isSecret;
    		this.absolutPath = absolutPath;
    		this.relativePath = relativePath;
    	}
    
    	@Override
    	public String toString() {
    		return "FileInfo [fileName=" + fileName + ", isSecret=" + isSecret + ", absolutPath=" + absolutPath
    				+ ", relativePath=" + relativePath + "]";
    	}
    
    }

二、创建一个until工具包，然后创建一个JesyFileUploadUtil类，代码如下：

package com.xiaohui.cms.until;
    
    import java.io.IOException;
    import java.util.Date;
    import java.util.Random;
    
    import javax.net.ssl.SSLContext;
    
    import com.xiaohui.cms.entity.FileInfo;
    import org.springframework.web.multipart.MultipartFile;
    
    import com.sun.jersey.api.client.Client;
    import com.sun.jersey.api.client.WebResource;
    import com.sun.jersey.api.client.config.ClientConfig;
    import com.sun.jersey.api.client.config.DefaultClientConfig;
    import com.sun.jersey.client.urlconnection.HTTPSProperties;
    
     
    /**
     * 跨服务器文件上传工具类
     * 
     * @author qin
     *
     */
    public class JesyFileUploadUtil {
     
    	/**
    	 * 上传文件
    	 * 
    	 * @param file --多媒体文件
    	 */
    	public static FileInfo uploadFile(MultipartFile file, String serverUrl) throws IOException {
    		//把request请求转换成多媒体的请求对象
    //		MultipartHttpServletRequest mh = (MultipartHttpServletRequest) request;
    		//根据文件名获取文件对象
    //		MultipartFile cm = mh.getFile(fileName);
    		//获取文件的上传流
    		byte[] fbytes = file.getBytes();
    		
    		//重新设置文件名
    		String newFileName = "";
    		newFileName += new Date().getTime()+""; //将当前时间获得的毫秒数拼接到新的文件名上
    		//随机生成一个3位的随机数
    		Random r = new Random();
    		for(int i=0; i<3; i++) {
    			newFileName += r.nextInt(10); //生成一个0-10之间的随机整数
    		}
    		
    		//获取文件的扩展名
    		String orginalFilename = file.getOriginalFilename();
    		String suffix = orginalFilename.substring(orginalFilename.indexOf("."));
    		
    		
    		//创建jesy服务器，进行跨服务器上传
    //		Client client = Client.create(getClientConfig());
    		Client client = Client.create();
    		//把文件关联到远程服务器
    		//http://127.0.0.1:8080/ssm_image_server/upload/123131312321.jpg
    		WebResource resource = client.resource(serverUrl+"/upload/"+newFileName+suffix);
    		//上传
    		resource.put(String.class, fbytes);
    		
    		//图片上传成功后要做的事儿
    		//1、ajax回调函数做图片回显（需要图片的完整路径）
    		//2、将图片的路径保存到数据库（需要图片的相对路径）
    		String fullPath = serverUrl+"/upload/"+newFileName+suffix; //全路径
    		String relativePath = "/upload/"+newFileName+suffix; //相对路径
    		
    //		//生成一个json响应给客户端
    //		String resultJson = "{\"fullPath\":\""+fullPath+"\", \"relativePath\":\""+relativePath+"\"}";
    //		return resultJson;
    		
    		return new FileInfo(newFileName+suffix, false, fullPath, relativePath);
    	}
    
    }

三、创建一个filecontroller类，代码如下：

package com.xiaohui.cms.controller;
    
    import com.xiaohui.cms.entity.FileInfo;
    import com.xiaohui.cms.until.JesyFileUploadUtil;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.IOException;
    
    @RestController
    @RequestMapping("/upload")
    public class FileController {
        @PostMapping("/file")
        @ResponseBody
        @CrossOrigin(origins = "*")
        public String upload(MultipartFile file){
            String path = null;
            try {
                FileInfo fileInfo = JesyFileUploadUtil.uploadFile(file,"http://127.0.0.1:8060");
                path = fileInfo.getRelativePath();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return path;
        }
    }

四、修改yml配置文件，设置图片上传的大小，代码如下：

server:
      port: 8082
    spring:
      datasource:
        url: jdbc:mysql://127.0.0.1:3306/t_cms?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=GMT%2B8
        username: root
        password: root
        driver-class-name: com.mysql.cj.jdbc.Driver  #8.0??
        #driver-class-name: com.mysql.jdbc.Driver
    # 是设置单个文件的大小，值=-1表示不限制大小
      servlet:
        multipart:
          max-file-size: 10MB  # 单个文件的大小
          max-request-size: 100MB  # 上传文件的总大小

五、打开HbuilderX文件，在需要添加的页面设置一个上传按钮，名字为“选择图片”，代码如下：

<view style="margin-bottom: 15rpx;">
    					选择标题图（图片分辨率建议为：200px*200px)
    				</view>
    				<button type="default" size="mini" @click="upload" :loading="loading">选择照片</button>

六、声明变量。

1、全局变量var \_self

2、进度条和图片地址，如下：

imgPath: null,//图片的地址
    				loading: false,

七、创建upload函数，实现上传，代码如下：

/*选择照片，上传照片*/
    			upload(){
    				_self = this;
    				_self.loading = true;
    				//选择图片，使用uni.chooseImge
    				uni.chooseImage({
    					count: 1,
    					sizeType:['original','compressed'],//指定上传图片是原图还是压缩，original原图，compressed压缩图
    					sourceType:['album'],//从相册选择
    					success: (res) => {
    						const tempFilePath=res.tempFilePaths;//图片选择完成后，获取该图片的路径
    						
    						//上传图片，使用uni.uploadfile
    						uni.uploadFile({
    							url: "http://localhost:8082/upload/file",//找到上传文件的controller
    							filePath: tempFilePath[0],//要上传的文件路径和上传的地基章图片
    							name: 'file',//把文件放入file中
    							success: (res) => {
    								console.log(res);
    								_self.loading = false;
    								_self.imgPath = res.data;
    							}
    						});
    					}
    					
    				})	
    			}

八、测试。

1、上传前页面

![7a848def2a0d416cb0aa2b2ac29a1081.png][]2、上传成功页面

![96454ae54d184e059c3592be8792d77a.png][]

3、上传成功文件夹

![adadfdaef065488bb4ff1f9bddefe185.png][]

我们可以看到上传成功后的页面图片只是一个路径，接下来就是需要将上传好的图片展示出来。

只需三步即可展示。

一、在article.vue文件中将logo这一行进行改动，代码如下：

<uni-td align="center">
    					<image style="width: 80rpx;height: 80rpx;" :src="baseUrl+article.logo"></image>
    				</uni-td>

二、date中进行声明，地址写你服务器的端口号，如下：

baseUrl: "http://localhost:8060",

三、进行测试。

![aa27bc269f62487a89e92b67d58d9896.png][]

即可把上传的图片展示出来。

最后，附上HbuilderX中完整代码。

1、article.vue文件。

<template>
    	<view>
    		<menuDraw></menuDraw>  
    		<uni-nav-bar title="文章管理" @clickLeft="doBack" leftText="返回" @clickRight="doSave" rightText="添加"></uni-nav-bar>
    		<uni-table :border="true" :stripe="true">
    			<uni-tr>
    				<uni-th align="center">ID</uni-th>
    				<uni-th align="center">文章名称</uni-th>
    				<uni-th align="center">标题图片</uni-th>
    				<uni-th align="center">发布时间</uni-th>
    				<uni-th align="center">文章简述</uni-th>
    			</uni-tr>
    			<uni-tr v-for="article in articleList">
    				<uni-td>{
       {article.id}}</uni-td>
    				<uni-td>{
       {article.name}}</uni-td>
    				<uni-td align="center">
    					<image style="width: 80rpx;height: 80rpx;" :src="baseUrl+article.logo"></image>
    				</uni-td>
    				<uni-td>{
       {article.publishTime}}</uni-td>
    				<uni-td>{
       {article.descr}}</uni-td>
    				<uni-td align="center">
    					<button @click="doUpdate(article.id)" type="primary" size="mini" style="margin-right: 10rpx;">修改</button>
    					<button @click="doDelete(article.id)" type="warn" size="mini">删除</button>
    				</uni-td>
    			</uni-tr>
    		</uni-table>
    		
    		<uni-pagination
    		:current="pageIndex"
    		:pageSize="pageSize"
    		:total="pageTotal"
    		@change="pageChanged"
    		/>
    	</view>
    </template>
    
    <script>
    	import menuDraw from "../template/menu_draw.vue";//第一步：导入外部文件
    	export default {
    		//组件的声明
    		components:{
    			menuDraw//声明组件
    		},
    		data() {
    			return {
    				baseUrl: "http://localhost:8060",
    				cid:null,//栏目id
    				nice:"遇到你很高兴！",
    				articleList: null,
    				pageIndex:1,//页码
    				pageSize:6,//每页展示数据的条数
    				pageTotal:10 //数据总条数
    			}
    		},
    		onLoad(options) {
    			this.cid = options.cid;
    		},
    		/*当页面显示成功之后执行*/
    		onShow() {
    			this.requestUsers();/*定义请求用户列表的函数，通过http请求微服务用户列表*/
    		},
    		methods: {
    			/*请求用户列表*/
    			requestUsers(){
    				/*uni_app的API发生http请求*/
    			uni.request({
    			    url: 'http://localhost:8082/article/list', //仅为示例，并非真实接口地址。
    			    data:{
    				cid:this.cid,
    				pageIndex: this.pageIndex,
    				pageSize: this.pageSize
    				},
    				success: (res) => {
    			        console.log(res.data);/*打印数据到控制台*/
    					this.articleList = res.data.data;
    					this.pageTotal = res.data.totle;
    			    }
    			});	
    			},
    			//*当分页器被点击时触发*/
    			pageChanged(e){//*当分页器被点击时触发
    				console.log(e.current);//打印出当前点击的页码
    				this.pageIndex = e.current;//给页码赋值
    			    this.requestUsers();
    			},
    			/*点击列表修改按钮时触发*/
    			doUpdate(id){
    				//console.log("用户修改:id="+id);
    				uni.redirectTo({
    					url:"./article_update?id="+id,
    				})
    			},
    			/*点击分配权限按钮时触发*/
    			doResource(id){
    				uni.navigateTo({
    					url: "../articleres/articleres?id="+id
    				})
    			},
    			/*点击列表删除按钮时触发*/
    			doDelete(id){
    				//console.log("用户删除:id="+id);
    				uni.request({
    					url: "http://localhost:8082/article/delete?id="+id,
    					success: (res) => {
    						if(res.data.code == 200){//删除成功
    							this.articleList = res.data.data;
    						}
    					}
    				})
    			},
    			doBack(){
    				uni.navigateBack();
    			},
    			doSave(){
    				uni.redirectTo({
    					url: "article_add?cid="+this.cid
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

2、article\_add.vue文件。

<template>
    	<view>
    		<menuDraw></menuDraw>
    		<view style="width: 350rpx; margin-top:80rpx; margin-left:auto;margin-right: auto;">
    			<uni-forms :modelValue="FormData">
    				<uni-forms-item label="文章名称"  name="name">
    					<uni-easyinput type="text" v-model="FormData.name" placeholder="请输入文章名称"></uni-easyinput>
    				</uni-forms-item>
    				<uni-forms-item label="文章简述"  name="descr">
    					<uni-easyinput type="text" v-model="FormData.descr" placeholder="请输入文章简述"></uni-easyinput>
    				</uni-forms-item>
    				<view style="margin-bottom: 15rpx;">
    					选择标题图（图片分辨率建议为：200px*200px)
    				</view>
    				<button type="default" size="mini" @click="upload" :loading="loading">选择照片</button>
    				<button type="primary"  @click="doSave">确认添加</button>
    			</uni-forms>
    		</view>
    		
    		<uni-popup ref="popup" type="dialog">
    			<uni-popup-dialog mode="base" title="通知" :content="msg" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
    		</uni-popup>
    	</view>
    </template>
    
    <script>
    	import menuDraw from "../template/menu_draw.vue";
    	var _self;
    	export default {
    		components:{
    			menuDraw//声明组件
    		},
    		data() {
    			return {
    				imgPath: null,//图片的地址
    				loading: false,
    				FormData:{
    					cid:null,//栏目id
    					name:null,//名称
    					descr:null//文章简述
    				},
    				msg:null //警告对话框提示的信息
    			}
    		},
    		onLoad(options) {
    			this.cid = options.cid;
    		},
    		methods: {
    			/*添加用户*/
    			doSave(){
    				//console.log(this.FormData.phone)
    				//console.log(this.FormData.articlename)
    				uni.request({
    					url: "http://localhost:8082/article/add",
    					data:{
    						name:this.FormData.name,
    						descr:this.FormData.descr,
    						cid:this.cid,
    						logo: this.imgPath
    					},
    					method:"GET",
    					success: (res) => {
    						if(res.data.code==200){//保存成功
    							uni.redirectTo({
    							url:"article?cid="+this.cid
    							})
    						}else{//保存失败
    						    this.msg=res.data.msg;
    							this.open();
    						}
    					}
    				})
    			},
    			//点击对话框确认按钮执行的操作
    			confirm(){
    				this.$refs.popup.close();
    			},
    			/*点击对话框关闭按钮执行的操作*/
    			close() {
    				this.$refs.popup.close();
    			},
    			//弹出警告对话框
    			open() {
    				this.$refs.popup.open();
    			},
    			/*选择照片，上传照片*/
    			upload(){
    				_self = this;
    				_self.loading = true;
    				//选择图片，使用uni.chooseImge
    				uni.chooseImage({
    					count: 1,
    					sizeType:['original','compressed'],//指定上传图片是原图还是压缩，original原图，compressed压缩图
    					sourceType:['album'],//从相册选择
    					success: (res) => {
    						const tempFilePath=res.tempFilePaths;//图片选择完成后，获取该图片的路径
    						
    						//上传图片，使用uni.uploadfile
    						uni.uploadFile({
    							url: "http://localhost:8082/upload/file",//找到上传文件的controller
    							filePath: tempFilePath[0],//要上传的文件路径和上传的地基章图片
    							name: 'file',//把文件放入file中
    							success: (res) => {
    								console.log(res);
    								_self.loading = false;
    								_self.imgPath = res.data;
    							}
    						});
    					}
    					
    				})	
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

3、article\_update.vue文件。

<template>
    	<view>
    		<menuDraw></menuDraw>
    		<view style="width: 350rpx; margin-top:80rpx; margin-left:auto;margin-right: auto;">
    			<uni-forms :modelValue="FormData">
    				<uni-forms-item label="文章名称"  name="name">
    					<uni-easyinput type="text" v-model="FormData.name" placeholder="请输入文章名称"></uni-easyinput>
    				</uni-forms-item>
    				<uni-forms-item label="文章简述"  name="descr">
    					<uni-easyinput type="text" v-model="FormData.descr" placeholder="请输入文章简述"></uni-easyinput>
    				</uni-forms-item>
    				<uni-forms-item label="栏目id"  name="cid">
    					<uni-easyinput type="text" v-model="FormData.cid" placeholder="请输入栏目id"></uni-easyinput>
    				</uni-forms-item>
    				<button type="primary" size="mini" @click="doUpdate">修改</button>
    			</uni-forms>
    		</view>
    		
    		<uni-popup ref="popup" type="dialog">
    			<uni-popup-dialog mode="base" title="通知" :content="msg" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
    		</uni-popup>
    	</view>
    </template>
    
    <script>
    	import menuDraw from "../template/menu_draw.vue";
    	export default {
    		components:{
    			menuDraw//声明组件
    		},
    		/*当页面加载成功之后触发，用于接收页面跳转及传参*/
    		onLoad(options) {
    			this.id=options.id;
    			console.log("接收页面传参："+this.id);
    		},
    		
    		/*当页面渲染成功之后执行*/
    		onShow() {
    			this.requestUserInfo();/*定义请求用户列表的函数，通过http请求微服务用户列表*/
    		},
    		data() {
    			return {
    				id:null, //页面传参的用户id
    				FormData:{
    					name:null,//文章名称
    					descr:null,//文章简述
    					cid:null//栏目id
    				},
    				msg:null //警告对话框提示的信息
    			}
    		},
    		methods: {
    			/*修改文章*/
    			doUpdate(){
    				uni.request({
    					url: "http://localhost:8082/article/update",
    					data:{
    						name:this.FormData.name,
    						descr:this.FormData.descr,
    						cid:this.FormData.cid,
    						id:this.id
    					},
    					method:"GET",
    					success: (res) => {
    						if(res.data.code==200){//保存成功
    							uni.navigateBack()
    							}else{//保存失败
    						this.msg=res.data.msg;
    							this.open();
    						}
    					}
    				});
    			},
    			//点击对话框确认按钮执行的操作
    			confirm(){
    				this.$refs.popup.close();
    			},
    			/*点击对话框关闭按钮执行的操作*/
    			close() {
    				this.$refs.popup.close();
    			},
    			//弹出警告对话框
    			open() {
    				this.$refs.popup.open();
    			},
    			/*获取文章信息*/
    			requestUserInfo(){
    				uni.request({
    					url:"http://localhost:8082/article/info?id="+this.id,
    					success:(res) =>{
    						console.log(res.data)
    						this.FormData=res.data.data;
    					}
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

如此，我们就可以实现在前后端分离的情况下进行图片上传并实现图片展示了，快行动起来吧。

[7a848def2a0d416cb0aa2b2ac29a1081.png]: https://img-blog.csdnimg.cn/7a848def2a0d416cb0aa2b2ac29a1081.png
[96454ae54d184e059c3592be8792d77a.png]: https://img-blog.csdnimg.cn/96454ae54d184e059c3592be8792d77a.png
[adadfdaef065488bb4ff1f9bddefe185.png]: https://img-blog.csdnimg.cn/adadfdaef065488bb4ff1f9bddefe185.png
[aa27bc269f62487a89e92b67d58d9896.png]: https://img-blog.csdnimg.cn/aa27bc269f62487a89e92b67d58d9896.png