微信小程序图片上传java后台

js代码：

chooseImg: function (e) {var that = this;var imgs = this.data.imgs;if (imgs.length >= 9) {this.setData({lenMore: 1});setTimeout(function () {that.setData({lenMore: 0});}, 2500);return false;}wx.chooseImage({// count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;var imgs = that.data.imgs;// console.log(tempFilePaths + '----');for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 9) {that.setData({imgs: imgs});return false;} else {imgs.push(tempFilePaths[i]);}console.log("---->   "+tempFilePaths[i])wx.uploadFile({url: 'http://localhost:8088/bluewind/storeAll/upload',filePath: tempFilePaths[i],name: "file",header: {"content-type": "multipart/form-data"},success: function (res) {console.log("res"+res.data);if (res.status == 0) {wx.showToast({title: "上传成功",icon: "none",duration: 1500})// that.data.imgs.push(JSON.parse(res.data).data)that.setData({imgs: that.data.imgs})}},fail: function (err) {wx.showToast({title: "上传失败",icon: "none",duration: 2000})},complete: function (result) {console.log(result.errMsg)}})}// console.log(imgs);that.setData({imgs: imgs});}});},// 删除图片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});},// 预览图片previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var imgs = this.data.imgs;wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})},

css代码：

.img{display: inline-block;
}.pic {width: 215rpx;height: 215rpx;
float:left;
position:relative;
margin-right:9px;
margin-bottom:9px;
}.delete-btn{position: absolute;top: 0;right: 0;
}.weui-uploader{padding: 10rpx;
}.lineHeight {width: 100%;line-height: 80rpx;border-bottom: 1px solid #ccc;font-size: 30rpx;
}
.container {padding: 0;align-items: left;padding-left: 15rpx;
}
.numberInfo {font-size: 24rpx;text-indent: 15rpx;border-bottom: 1px solid #ccc;
}/* .input {display: inline-block;border: 1px solid #ccc;line-height: 80rpx;vertical-align: middle;margin-left: 11%;width: 75%;
} */
.input,
.input-7 ,
.input-15{margin-left: 7%;display: inline-block;/* border: 1px solid #ccc; */line-height: 80rpx;vertical-align: middle;width: 75%;
}
.input{margin-left: 11%;
}button {width: 100%;margin-top: 30rpx;
}
.select{margin-left: 7%;color: #666;
}.input-15{margin-left:15%;
}

html：

<view class="weui-uploader"><view class="img-v weui-uploader__bd"><view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><image class='weui-uploader__img'src="{{item}}"data-index="{{index}}" mode="aspectFill" bindtap="previewImg"><icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon></image></view><!-- 用来提示用户上传图片 --><view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view></view>

java后台：

@PostMapping("/upload")public ResultDto upload(@RequestParam(value = "file", required = false)MultipartFile file){System.out.println("进来了上传图片接口");System.out.println(file);String msg = "";if (file.isEmpty()) {System.out.println("文化上传失败!");msg="文化上传失败!";return ResultDto.error(2,msg);}else {System.out.println("文化上传成功!");// 拿到文件名String filename = file.getOriginalFilename();System.out.println("0"+filename);//获取图片的文件名// 存放上传图片的文件夹File fileDir = UploadUtils.getImgDirFile();// 输出文件夹绝对路径  -- 这里的绝对路径是相当于当前项目的路径而不是“容器”路径//  System.out.println(fileDir.getAbsolutePath());try {// 构建真实的文件路径File newFile = new File(fileDir.getAbsolutePath() + File.separator + filename);// 上传图片到 -》 “绝对路径”file.transferTo(newFile);msg = "上传成功!";} catch (IOException e) {e.printStackTrace();}}return ResultDto.build(0,msg,1);}static class UploadUtils{// 项目根路径下的目录  -- SpringBoot static 目录相当于是根路径下（SpringBoot 默认）public final static String IMG_PATH_PREFIX = "static/img_upload";public static File getImgDirFile(){// 构建上传文件的存放 "文件夹" 路径String fileDirPath = new String("src/main/resources/" + IMG_PATH_PREFIX);File fileDir = new File(fileDirPath);if(!fileDir.exists()){// 递归生成文件夹fileDir.mkdirs();}return fileDir;}}

效果展示

图片代码上传参见：https://www.cnblogs.com/m1754171640/p/10525826.html
活到老，学到老

微信小程序图片上传java后台相关推荐

java微信上传图片_微信小程序图片上传java后台（前后端代码）
小程序代码 upload:function(e){ var that = this; wx.showActionSheet({ itemList: ['从相册选择','拍照'], itemColor: ...
java 微信图片上传_微信小程序图片上传java端以及前端实现
小程序的图片上传与传统的图片上传方式有一些不一样如果你有幸看到这篇文章,恭喜你,你可以完美解决了. 话不多说,前后端代码一并奉上: (基于springmvc ) @Controller @Reque ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
微信小程序图片上传到java后台
前言关于云存储的文件上传,我想说的真的挺多的,这是一篇纯原创的基于小程序或者是SpringBoot的云存储的全过程. 整篇教学很细很细,适合于所有的java学习者,特别是刚刚结束学习java想要练 ...
微信小程序图片上传与内容安全审核
文章目录原由内容审核种类小程序云开发图片检测创建云函数编写图片检测代码小程序图片处理图片上传图片压缩云函数安全检测接入文本检测最后的坑原由之前有开发一个微信小程序,拥有图片 ...
微信小程序图片上传和预览以及取消上传图片案例
前言: 做小程序项目遇到一个需求,就是上传图片和预览,以及取消指定的图片,其实这个功能挺好搞的,借助微信官方的API结合实现,只不过注意一点细节.不多说了直接上代码和效果图.大家可以直接复制我的代码进 ...
uniApp 生成微信小程序图片上传提示 fail url not in domain list 的解决方法
问题表现: uniApp 生成微信小程序,获取内容程序不报错,但是图片上传提示 fail url not in domain list 错误. 问题分析: 微信小程序:服务器域名配置每个微信小程序需 ...
微信小程序-图片上传
微信小程序有原生的API接口,来进行图片的选取.上传 wx.chooseImage(Object object) | 微信开放文档 (qq.com)https://developers.weixin. ...

微信小程序图片上传java后台

微信小程序图片上传java后台相关推荐

最新文章

热门文章