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

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();
    }