纵有疾风起
人生不言弃

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

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

首先看效果实现图

小程序端上传成功的回调

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

Java端接受到图片后的打印

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

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

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

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

一,小程序端代码

1,wxml布局文件

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

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

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

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

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

这里的主要实现方法都在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给到小程序端。

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

    通过上图可以看出,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项目这么基础的知识,我这里就不再给大家讲解了。

到这里,我们的小程序多图片上传就算大工告成了,后面我会录制相关的视频出来,感兴趣的同学可以关注“编程小石头”公众号,回复“多图片上传”,即可获取源码。

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

文章转载于:https://www.jianshu.com/p/0a66044d3400

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 小程序上传多张图片到springboot后台,返回可供访问的图片链接

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活