小程序上传多张图片到springboot后台,返回可供访问的图片链接

简介: 小程序上传多张图片到Java后台

最近在做小程序多图片上传到Java后台,Java后台是用springboot写的。也算是踩了不少坑,今天就来带大家来一步步实现小程序端多图片的上传。

首先看效果实现图

小程序端上传成功的回调

Java端接受到图片后的打印

链接可以直接在浏览器里打开查看

其实这两个截图就可以看出,我们图片上传成功了,并且给小程序前端返回了可供访问的图片url。
话不多说,直接看代码。

一,小程序端代码

1,wxml布局文件

其实页面很简答,一个上传按钮,一个选择图片按钮。一定要记得先选择图片,然后再点击图片上传。
2,js文件
再来看下js文件,js文件里最重要的就是uploadFile方法

uploadFile方法里我们请求自己的Java后台接口,进行图片上传。这里有些注意点要给大家说下

  • 小程序每次只能上传单张图片
  • 如果采用for循环进行上传请求 会出现并行上传,并行上传会出现某一个图片漏传的问题
  • 我采用串行的思路,每张图片执行一次上传请求,请求响应成功后在调用请求上传第二张图片,以此类推 。
    下面把完整的代码贴出来给到大家
Page({
  data: {
    img_arr: [],
    formdata: '',
  },
  //点击发布按钮
  formSubmit() {
    this.uploadFile(0)
  },
  //上传图片
  uploadFile: function (index) {
    var that = this
    //如果所有图片都已经上传完,就不再往下执行
    if (index >= that.data.img_arr.length) {
      return
    }
    wx.uploadFile({
      url: 'http://localhost:8080/upload/picture', //自己的Java后台接口地址
      filePath: that.data.img_arr[index],
      name: 'content',
      header: {
        "Content-Type": "multipart/form-data",
        'accept': 'application/json',
        'Authorization': 'okgoodit' //若有token,此处换上你的token,没有的话省略
      },
      formData: ({ //上传图片所要携带的参数
        username: "编程小石头",
        password: '2501902696'
      }),
      success: function (res) {
        console.log(`第${index+1}张上传成功`, res)
        index++
        that.uploadFile(index)
      },
      fail(res) {
        console.log(`第${index+1}张上传失败`, res)
      }
    })
  },
  //选择要上传的图片
  upimg: function () {
    var that = this;
    //这里小程序规定最好只能选9张,我这里随便填的3,你也可以自己改
    if (this.data.img_arr.length < 3) {
      wx.chooseImage({
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
          that.setData({
            img_arr: that.data.img_arr.concat(res.tempFilePaths)
          });
        }
      })
    } else {
      wx.showToast({
        title: '最多上传三张图片',
        icon: 'loading',
        duration: 3000
      });
    }
  },
})

代码里注释很清楚了。到这里小程序端基本上完事了。接下来我们看Java后台的实现。

二,Java后台代码

先来看后台代码目录,后台代码很简单,就是一个UploadController

这里的主要实现方法都在uploadPicture

@RequestMapping("/picture")
    public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String filePath = "";
        request.setCharacterEncoding("utf-8"); //设置编码
        String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
        File dir = new File(realPath);
        //文件目录不存在,就创建一个
        if (!dir.isDirectory()) {
            dir.mkdirs();
        }
        try {
            StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;
            //获取formdata的值
            Iterator<String> iterator = req.getFileNames();
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            String timedata = request.getParameter("timedata");

            while (iterator.hasNext()) {
                MultipartFile file = req.getFile(iterator.next());
                String fileName = file.getOriginalFilename();
                //真正写到磁盘上
                String uuid = UUID.randomUUID().toString().replace("-", "");
                String kzm = fileName.substring(fileName.lastIndexOf("."));
                String filename = uuid + kzm;
                File file1 = new File(realPath + filename);
                OutputStream out = new FileOutputStream(file1);
                out.write(file.getBytes());
                out.close();
                filePath = request.getScheme() + "://" +
                        request.getServerName() + ":"
                        + request.getServerPort()
                        + "/uploadFile/" + filename;
                System.out.println("访问图片路径:" + filePath + "====username:" + username);
            }
        } catch (Exception e) {
            logger.error("", e);
        }
        return filePath;

    }

这里我给大家讲下实现步骤

  • 1,springboot对外提供接口供小程序访问
  • 2,小程序上传单个图片和额外参数给后台
  • 3,后台把图片写到本地,或者图片服务器,然后返回对应的图片url给到小程序端。

通过上图可以看出,Java后台返回了对应的图片url给前端,并且可以拿到小程序前端传的用户名。
我这里把完整的代码贴给大家。

package com.img.demo;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.support.StandardMultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.Iterator;
import java.util.UUID;

/**
 * 图片上传
 * 编程小石头
 */
@RestController
@RequestMapping("/upload")
public class UploadController {
    private static final Logger logger = LoggerFactory.getLogger(UploadController.class);

    @RequestMapping("/picture")
    public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String filePath = "";
        request.setCharacterEncoding("utf-8"); //设置编码
        String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
        File dir = new File(realPath);
        //文件目录不存在,就创建一个
        if (!dir.isDirectory()) {
            dir.mkdirs();
        }
        try {
            StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;
            //获取formdata的值
            Iterator<String> iterator = req.getFileNames();
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            String timedata = request.getParameter("timedata");

            while (iterator.hasNext()) {
                MultipartFile file = req.getFile(iterator.next());
                String fileName = file.getOriginalFilename();
                //真正写到磁盘上
                String uuid = UUID.randomUUID().toString().replace("-", "");
                String kzm = fileName.substring(fileName.lastIndexOf("."));
                String filename = uuid + kzm;
                File file1 = new File(realPath + filename);
                OutputStream out = new FileOutputStream(file1);
                out.write(file.getBytes());
                out.close();
                filePath = request.getScheme() + "://" +
                        request.getServerName() + ":"
                        + request.getServerPort()
                        + "/uploadFile/" + filename;
                System.out.println("访问图片路径:" + filePath + "====username:" + username);
            }
        } catch (Exception e) {
            logger.error("", e);
        }
        return filePath;
    }
}

至于如何创建springboot项目这么基础的知识,我这里就不再给大家讲解了。

相关文章
|
3月前
|
SQL 监控 druid
springboot-druid数据源的配置方式及配置后台监控-自定义和导入stater(推荐-简单方便使用)两种方式配置druid数据源
这篇文章介绍了如何在Spring Boot项目中配置和监控Druid数据源,包括自定义配置和使用Spring Boot Starter两种方法。
|
2月前
|
开发框架 前端开发 网络协议
Spring Boot结合Netty和WebSocket,实现后台向前端实时推送信息
【10月更文挑战第18天】 在现代互联网应用中,实时通信变得越来越重要。WebSocket作为一种在单个TCP连接上进行全双工通信的协议,为客户端和服务器之间的实时数据传输提供了一种高效的解决方案。Netty作为一个高性能、事件驱动的NIO框架,它基于Java NIO实现了异步和事件驱动的网络应用程序。Spring Boot是一个基于Spring框架的微服务开发框架,它提供了许多开箱即用的功能和简化配置的机制。本文将详细介绍如何使用Spring Boot集成Netty和WebSocket,实现后台向前端推送信息的功能。
350 1
|
2月前
|
小程序
小程序提交数据到后台做加法运算
小程序提交数据到后台做加法运算
24 0
|
23天前
|
JSON JavaScript 前端开发
springboot中使用knife4j访问接口文档的一系列问题
本文介绍了在Spring Boot项目中使用Knife4j访问接口文档时遇到的一系列问题及其解决方案。作者首先介绍了自己是一名自学前端的大一学生,熟悉JavaScript和Vue,正在向全栈方向发展。接着详细说明了如何解决Swagger请求404错误,包括升级Knife4j依赖、替换Swagger 2注解为Swagger 3注解以及修改配置类中的代码。最后,针对报JS错误的问题,提供了删除消息转换器代码的解决方法。希望这些内容能对读者有所帮助。
109 5
|
2月前
|
Java 关系型数据库 MySQL
springboot学习四:springboot链接mysql数据库,使用JdbcTemplate 操作mysql
这篇文章是关于如何使用Spring Boot框架通过JdbcTemplate操作MySQL数据库的教程。
36 0
springboot学习四:springboot链接mysql数据库,使用JdbcTemplate 操作mysql
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
713 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
27天前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
36 0
|
2月前
|
小程序 Java
小程序访问java后台失败解决方案
小程序访问java后台失败解决方案
47 2
|
2月前
|
小程序 JavaScript Java
小程序访问java后台
小程序访问java后台
28 1
|
2月前
|
Java 关系型数据库 数据库连接
SpringBoot项目使用yml文件链接数据库异常
【10月更文挑战第3天】Spring Boot项目中数据库连接问题可能源于配置错误或依赖缺失。YAML配置文件的格式不正确,如缩进错误,会导致解析失败;而数据库驱动不匹配、连接字符串或认证信息错误同样引发连接异常。解决方法包括检查并修正YAML格式,确认配置属性无误,以及添加正确的数据库驱动依赖。利用日志记录和异常信息分析可辅助问题排查。
247 10