小程序开发-论坛发布多图片上传到服务器并实现图片预览功能

56 阅读 0 评论 37 点赞

我是靠谱客的博主紧张故事，最近开发中收集的这篇文章主要介绍小程序开发-论坛发布多图片上传到服务器并实现图片预览功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vue页面

<view class="container1" >
<image src="../../static/errorImage.jpg" mode="scaleToFill" @click="upload"></image>
<image v-for="item in imglist" :src="item" mode="scaleToFill"></image>
</view>
<button @click="uploadImage()">上传</button>

前端对应方法，由微信端已经封装好直接引用即可

methods:{
uploadImage(){
uni.uploadFile({
url: 'http://120.xxxxxx/upImgs',
method: 'POST',
filePath: this.imglist[0],
name: 'file',
success: (uploadFileRes) => {
console.log(uploadFileRes)
}
});
},
upload(){
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res)=> {
const images = res.tempFilePaths;
this.savetemp(images);
}
});
},
savetemp(img){
for (var i = 0; i < img.length; i++) {
this.imglist.push(img[i]);
}
},

后台对应上传图片代码，上传成功之后返回对应图片路径

 @RequestMapping("upImgs")
public String upImgs(HttpServletRequest request,
@RequestParam("file") MultipartFile
myfile) throws IOException {
String fileSavePath = "/xm/";
//系统linux路径
File fir=new File(fileSavePath);
//不存在则创建文件夹
if(!fir.exists()){
fir.mkdirs();
}
//文件的后缀名
String suffix=myfile.getOriginalFilename().substring(myfile.getOriginalFilename().lastIndexOf("."));
//新文件名字 为了防止重复加上UUID
String newFileName= UUID.randomUUID().toString().replaceAll("-","")+suffix;
System.out.println("filesavepath:"+fileSavePath+" "+"newFileName:"+newFileName);
//新的文件路径
File newFile=new File(fileSavePath+newFileName);
//把文件写入新的File文件
myfile.transferTo(newFile);
//url路径=http + :// + server名字 + port端口 + /imges/ + newFileName
String url=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/api/dsxs/forum/images/"+newFileName;
return url;
}

此时即可上传成功，为了可以通过路径访问本地图片，还需要定义过滤器

@Configuration
public class FilePathConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/images/**") //虚拟url路径
.addResourceLocations("/xm/"); //真实本地路径
}
}

此时根据返回的url地址即可访问到图片。

实现多图片上传，在这基础上让前端接收多个url，保存即可。

实现思路：自定义VO类实现接收多图片，数据库分成两个表存储信息，一个表存储基本信息，另一个表根据基本信息表的id进行对应，存储多个图片。因为是个方法完成，当基本信息表保存后，需要返回对应的id，即主键自增返回，这里我用的mybatis-plus自带主键自增返回不需要过多的配置。

发布论坛方法：

 //添加论坛
@PostMapping("saveForum")
public R saveForum(ForumVo forumVo) {
Forum forum = new Forum();
forum.setTopic(forumVo.getTopic());
forum.setUserid(forumVo.getUserid());
forum.setOpenid(forumVo.getOpenid());
forum.setAvatarurl(forumVo.getAvatarurl());
forum.setUsername(forumVo.getUsername());
forum.setMessage(forumVo.getMessage());
Date date = new Date();
forum.setTime(date);
forumService.save(forum);
Integer forumId = forum.getId();
for (int i = 0; i < forumVo.getPic().size(); i++) {
Forumpic forumpic = new Forumpic();
forumpic.setForumid(forumId);
forumpic.setPic(forumVo.getPic().get(i));
forumpicService.save(forumpic);
}
return R.ok();
}