uniapp上传图片

-嗯哼-

已于 2022-07-08 15:56:21 修改

阅读量466

点赞数

文章标签：前端 mybatis

于 2022-07-08 11:11:16 首次发布

本文链接：https://blog.csdn.net/m0_67973751/article/details/125674181

版权

IDEA

实体类

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 + "]";
	}

}

Controller类

package com.xiaohui.cms.controller;

import com.xiaohui.cms.entity.FileInfo;
import com.xiaohui.cms.utils.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://localhost:8060");//上传地址
            path =fileInfo.getRelativePath();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return path;
    }

    }

HBuilder X

页面上传

添加页面

uni 界面

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

变量

    var _self ;//声明
	export default {
		data() {
			return {
				imgpPath: null,//图片变量
				loading: false,//进度变量
        }

	}
}

函数

/*选择照片上传*/
			upload(){
				_self =this;
				_self.loading =true;
				//选择图片 使用uin.chooseImage
				uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],//original:原图：compressed:压缩图 指定上传的图片是原图 还是压缩图
					sourceType:['album'],//从相册选择
					success: (res) => {
						const temFilePath = res.tempFilePaths;//图片选择完成后 获取该图片的路劲
						
						//上传图片 使用uni.upLoadFile
						uni.uploadFile({
							url:'http://127.0.0.1:8070/upload/file',//上传文件的Controller
							filePath: temFilePath[0],//要上传的文件路径
							name:'file',
							success: (res) => {
								console.log(res);
								_self.loading =false;//进度条
								_self.imgpPath =res.data;
							}
						});
					}
				})
			}

页面列表

<uni-td align="center" >
					<image style="width: 50rpl height: 60rpx;" :src="baserUrl+article.logo"></image>
				</uni-td>

data

data() {
			return {
				baserUrl:'http://localhost:8060',
				
			}
		},

页面完整代码

<template>
	<view>
		<menuDraw></menuDraw>
		<uni-nav-bar title="文章管理" @clickLeft="doBack" leftText="返回" @clickRight="doSave" rightText="添加"></uni-nav-bar>
		<uni-table 
		    ref="articleTable" 
		    type="selection" 
		    :border="true" :stripe="true"
		    @selection-change="selectionChange"
		>
			<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-th align="center">设置</uni-th>
			</uni-tr>
			<uni-tr v-for="article in articleList">
				<uni-td align="center">{{article.id}}</uni-td>
				<uni-td align="center">{{article.name}}</uni-td>
				<uni-td align="center" >
					<image style="width: 50rpl height: 60rpx;" :src="baserUrl+article.logo"></image>
				</uni-td>
				<uni-td align="center">{{article.descr}}</uni-td>
				<uni-td align="center">{{article.publishTime}}</uni-td>
				<uni-td align="center">
					<view class="uni-group">
						<button style="margin-right: 10rpx;" size="mini" type="primary" @click="doupdate(article.id)">修改</button>
						<button style="margin-right: 10rpx;" size="mini" type="warn" @click="dodelete(article.id)">删除</button>
					</view>
				</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 {
				baserUrl:'http://localhost:8060',
				cid: null,
				articleList:null,
				pageIndex: 1,//分页器页码
				pageSize: 6,//分页器每页显示数据的条数
				pageTotal: 0 ,
			}
		},
		onLoad(options) {
			this.cid=options.cid;
		},
		onShow() {
			this.requestArticle();//调用请求用户列表的函数，通过HTTP请求微服务的用户列表
		},
		methods: {
			requestArticle(){
				/*uni-app的API发送http请求，默认get*/
				uni.request({
				    url: 'http://localhost:8070/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.total
				    }
				});
			},
			//当分页器被点击时触发
			pageChanged(e){
				console.log(e.current); //打印出当前点击的页码
				this.pageIndex = e.current; //给变量赋值
				this.requestArticle();
			},
				// 修改
					doupdate(id){
						//console.log("修改:用户id="+id);
						uni.redirectTo({
							url: './article_update?id='+id
						})
					},
					// 删除
					dodelete(id){
						//console.log("删除:用户id="+id);
						uni.request({
							url: 'http://localhost:8070/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>

添加页面

<template>
	<view>
		<menuDraw></menuDraw>
		<view style="width: 350rpx; margin-top: 80rpx; margin-left: auto; margin-right: auto;">
			<!-- <view>相当于<div> -->
			<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: 10rpx;">
					选择标题图（图片分辨率建议为:200px*200px)
				</view>
				<button type="primary" @click="upload" :loading="loading">选择照片</button>
				<button type="primary" size="mini" @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 {
				imgpPath: null,
				loading: false,
				FormData:{
					name: null,  
					publish_time: null, 
					logo: null,
					descr: null,
					cid: null
				},
				msg: null,
			}
		},
		onLoad(options) {
			this.cid =options.cid;
		},
		methods: {
			/* 保存用户*/
			doSave(){
				uni.request({
				    url: 'http://localhost:8070/article/add', //仅为示例，并非真实接口地址。
					method: "GET",
					data: {
						name: this.FormData.name,
						descr: this.FormData.descr,
						cid: this.cid,
						logo:this.imgpPath,
					},
				    success: (res) => {
						if(res.data.code == 200){  //添加成功
							//console.log("添加成功，跳转到主页");
							//跳转之前保存用户信息
							uni.redirectTo({
								url: 'cmsartical?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;
				//选择图片 使用uin.chooseImage
				uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],//original:原图：compressed:压缩图 指定上传的图片是原图 还是压缩图
					sourceType:['album'],//从相册选择
					success: (res) => {
						const temFilePath = res.tempFilePaths;//图片选择完成后 获取该图片的路劲
						
						//上传图片 使用uni.upLoadFile
						uni.uploadFile({
							url:'http://127.0.0.1:8070/upload/file',//上传文件的Controller
							filePath: temFilePath[0],//要上传的文件路径
							name:'file',
							success: (res) => {
								console.log(res);
								_self.loading =false;//进度条
								_self.imgpPath =res.data;
							}
						});
					}
				})
			}
		}
	}
</script>

<style>

</style>