uniapp更换头像代码笔记

<!-- uview中的头像组件 @click头像点击事件 -->
<u-avatar :src="" size="144" @click="albumClick"> data(){return{uploadUrl: "后台地址/upload", }
}
methods:{// 相册选择图片albumClick() {var _this = thislet src = {};_this.show = false;uni.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function(res) {const tempFilePaths = res.tempFilePathsuni.uploadFile({               // 调用文件上传url: _this.uploadUrl,      // 上传的地址filePath: tempFilePaths[0], // 上传的图片地址fileType: 'image',          // 确定上传文件类型name: 'file',success: (res)=> {// 头像信息_this.headPortrait = JSON.parse(res.data).data.urlPath                                  // 获取后台返回的网址this.upload()   //  文件地址存数据库},fail: (err)=> {uni.$u.toast("上传失败")}})},});},}

后台配置：

#标识图片上传的路径    application.yml
file:#本地存储的根目录localDir: D:/JT-SOFT/image#网络访问虚拟路径    nginx配置urlPath: http://image.jt.com

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ImageVO {private String virtualPath;     //文件动态路径private String urlPath;         // 文件网络路径private String fileName;        // 文件名称
}

    private String localDir = "D:/images/upload";        // 本地图片保存地址private String urlPath = "http://image.jt.com";@Overridepublic ImageVO upload(MultipartFile file) {// 防止大小写问题,将所有字母转化为小写String fileName = file.getOriginalFilename().toLowerCase();//利用正则判断是否为图片if (!fileName.matches("^.+\\.(jpg|png|gif|jpeg)$")) {//如果校验不通过,则终止程序return null;}System.out.println("图片类型正确的!!!!!!");//第二步 防止恶意程序 判断图片是否有宽度和高度try {BufferedImage bufferedImage =ImageIO.read(file.getInputStream());int width = bufferedImage.getWidth();int height = bufferedImage.getHeight();if (width == 0 || height == 0) {return null;}System.out.println("用户上传的是图片");//第三步: 目录如何划分 yyyy/MM/ddString dateDir = new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());String dirPath = localDir + dateDir;File dirFile = new File(dirPath);if (!dirFile.exists()) {//如果目录不存在时, 创建目录dirFile.mkdirs();}//第四步: 使用uuid实现文件名称 uuid.jpg//4.1 生成UUIDString uuid = UUID.randomUUID().toString().replace("-", "");//截取文件类型int index = fileName.lastIndexOf(".");String fileType = fileName.substring(index);//生成新文件名称String newFile = uuid + fileType;//第五步:实现文件上传  全路径 再上传String path = dirPath + newFile;file.transferTo(new File(path));System.out.println("文件上传成功!!!!");//第六步: 返回ImageVO数据//6.1 虚拟路径只写动态变化的数据  /2021/11/11/uuid.jpgString virtualPath = dateDir + newFile;//6.2 真实图片名称String fileNameVO = newFile;//6.3 网络地址 http://image.jt.com/xx/uuid.jpgString url = urlPath + virtualPath;return new ImageVO(virtualPath, url, fileNameVO);} catch (IOException e) {e.printStackTrace();return null;}}

uniapp更换头像代码笔记相关推荐

uni-app + uview 头像更换与头像预览
实现效果一.在template中写你需要实现的头像样式 <view @click="chooseAvater"><image :src='imgArr[0]'& ...
php修改头像怎么做,PHP - 点击更换头像
原理: 操作流程: 首先点击头像图片,弹出选择窗口,选中其中一个则窗口推出头像更换. 效果: 主页面代码: 头像: 子页面代码(弹出窗体页面): 请选择头像: echo ""; } ...
cocos2d-x与安卓混编实现“更换头像”
Cocos2dx与安卓混编实现"更换头像" 标签: cocos2d-x安卓 2014-07-13 17:13 1601人阅读评论(0) 收藏举报分类: Cocos ...
5分钟实现Android中更换头像功能
写在前面: 更换头像这个功能在用户界面几乎是100%出现的.通过拍摄照片或者调用图库中的图片,并且进行剪裁,来进行头像的设置. 功能相关截图如下: 下面我们直接看看完整代码吧: 1 2 3 4 5 6 ...
[转]5分钟实现Android中更换头像功能
5分钟实现Android中更换头像功能写在前面: 更换头像这个功能在用户界面几乎是100%出现的.通过拍摄照片或者调用图库中的图片,并且进行剪裁,来进行头像的设置. 功能相关截图如下: 下面我们直接 ...
php设置用户头像,PHP针对多用户实现更换头像功能
一个网站,其实说白了就是某几个特定功能的组合,而更换用户头像就在这些功能之中.今天就来做个测试,针对不同的用户,实现头像上传功能. 先给大家展示下成品效果图: 思路针对不同的用户上传头像,我们要为每 ...
微信小程序如何更换头像
问题在使用小程序的时候,注册个人账号通常会有要更换个人头像的情况,那么这个上传图片文件更换头像的过程该如何实现呢? 效果图: 方法 1)wxml配置 wxml中要配置一个bindtap绑定事件hea ...
Android之更换头像
更换头像后,只要不换虚拟机,头像一直都是最后一次更换的图片.重新运行或者卸载了重新安装,头像一直不变. 这里只有更换头像,所以简陋的弄一下,方便观察先上效果图:运行环境eclipse Android ...
【Android】更换头像的实现
现在不管什么APP都有个头像,如果你看见没有头像的APP就会感觉非常奇怪,以前头像都是方的,后来就变成圆的,我估计在过个几年就得来个五角星形状的头像,下面我把更换头像的代码写来: <Relati ...

uniapp更换头像代码笔记

uniapp更换头像代码笔记相关推荐

最新文章

热门文章