小程序上传文字和图片到服务器并保存在数据库

简单来说是先执行upload到后台，controller将图片保存到服务器后将图片路径通过json返回小程序，在upload sucess时setData存储路径。然后调用wx.request。下面，我用一个发布文章的代码来演示，小程序端wxml文件如下：

<!--pages/productReleased/productReleased.wxml--><!--文章发布--><view>文章发布</view><form bindsubmit="formSubmit"><!--文章标题--><view class='title'><view class='title_text'><text>文章标题:</text><input name="biaoti" type='text' value='{{biaoti}}' bindblur='titleBlur'></input></view></view><!--文章内容--><view class='title'><view class='title_text'><text>文章内容:</text><input name="neirong" type='text' value='{{neirong}}' bindblur='priceBlur'></input></view></view><!--文章作者--><view class='info-point'><view class='title_text'><text>文章作者:</text><textarea name="zuozhe" class='textarea' value='{{zuozhe}}' bindblur='infoBlur'></textarea></view></view><!--文章分类--><view class='info-point'><view class='title_text'><text>文章分类:</text><textarea name="fenlei" class='textarea' value='{{fenlei}}' bindblur='pointBlur'></textarea></view></view><!--文章链接--><view class='title'><view class='title_text'><text>文章链接:</text><textarea name="lianjie" class='textarea' value='{{lianjie}}' bindblur='pointBlur'></textarea></view></view><!--文章备注--><view class='title'><view class='title_text'><text>文章备注:</text><textarea name="beizhu" class='textarea' value='{{beizhu}}' bindblur='pointBlur'></textarea></view></view><!--文章顺序--><view class='title'><view class='title_text'><text>文章顺序:</text><textarea name="shunxu" class='textarea' value='{{shunxu}}' bindblur='pointBlur'></textarea></view></view><view class='tu1'> <block wx:for="{{img_arr}}" wx:key="index"> <view class='logoinfo'><image class='logoinfo' mode="aspectFill" src='{{item}}' data-index="{{index}}" bindtap="previewImg" bindlongpress="deleteImg" name="headimage" ></image></view> </block><image bindtap='upimg' class='tu' src="../images/x21.jpg"></image> </view> <button form-type='submit' class='sureRelease'>确认发布</button></form>

小程序端js文件如下：

const app = getApp()var form_data;var psw_vaule = [];Page({data: {tempFilePaths: [], img_arr: [],},//上传图片到服务器 formSubmit: function (e) {var images_list = []; //设置了一个空数组进行储存服务器端图片路径var that = this var adds = that.data.img_arr; for (var i = 0; i < this.data.img_arr.length; i++) {wx.uploadFile({url: '/bcxxjl/tpwz/tupian.do', //填写实际接口filePath: that.data.img_arr[i], method:'POST',name: 'file', header: {'content-type': 'multipart/form-data'}, // 设置请求的 header formData: adds, success: function (res) {var that = this // json转换数组var data1 = JSON.parse(res.data);images_list.push(data1.src);//把每次返回的地址放入数组if (3 == images_list.length) {//var data = JSON.parse(res.data);//console.log(data); //接口返回网络路径//that.setData({imgsrc:data.src})wx.request({url: '/bcxxjl/wztp/wenzi.do',header: {"Content-Type": "application/x-www-form-urlencoded"},method: "POST",data: {biaoti: e.detail.value.biaoti, neirong: e.detail.value.neirong, zuozhe: e.detail.value.zuozhe, fenlei: e.detail.value.fenlei, lianjie: e.detail.value.lianjie, beizhu: e.detail.value.beizhu, shunxu: e.detail.value.shunxu,// img: that.data.imgsrcimg: images_list[1]},success: function (res) {console.log(res.data);if (res.data.status == 0) {wx.showToast({title: '提交失败！！！',icon: 'loading',duration: 1500})} else {wx.showToast({title: '提交成功！！！',//这里打印出登录成功icon: 'success',duration: 1000})}}}) }} }) } this.setData({formdata: '' }) },//从本地获取照片 upimg: function () {var that = this; if (this.data.img_arr.length < 3) {wx.chooseImage({count: 1, //一次性上传到小程序的数量sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) {const tempFilePaths = res.tempFilePaths console.log(res.tempFilePaths) that.setData({img_arr: that.data.img_arr.concat(res.tempFilePaths),}) }}) } else {wx.showToast({title: '最多上传三张图片', icon: 'loading', duration: 2000})} },//删除照片功能与预览照片功能 deleteImg: function (e) {var that = this; var img_arr = that.data.img_arr; var index = e.currentTarget.dataset.index; wx.showModal({title: '提示',content: '确定要删除此图片吗？',success: function (res) {if (res.confirm) {console.log('点击确定了');img_arr.splice(index, 1); } else if (res.cancel) {console.log('点击取消了'); return false; } that.setData({img_arr: img_arr});} }) },previewImg: function (e) {var index = e.currentTarget.dataset.index; var img_arr = this.data.img_arr; wx.previewImage({current: img_arr[index],urls: img_arr }) },})

小程序端wxss文件如下：

/**index.wxss**//* pages/productReleased/productReleased.wxss */page {background-color: #f1f1f1;}.title {margin-top: 5rpx;background-color: white;width: 100%;height: 80rpx;}.title_text {margin-left: 20rpx;width: 100%;height: 50rpx;padding-top: 10rpx;display: flex;}.title_text text {font-size: 30rpx;}.title_text input {font-size: 30rpx;width: 60vw;margin-left: 20rpx;}.textarea {height: 100rpx;font-size: 30rpx;margin-left: 40rpx;width: 500rpx;}.info-point {background-color: white;width: 100%;height: 100rpx;margin-top: 5rpx;}/*选择图片View*/.addImv {background-color: white;/* border: 1px dashed gray; */display: flex;flex-wrap: wrap;align-items: center;margin-top: 5rpx;}.upImv {background-color: white;width: 100%;margin-top: 5rpx;}.upImv_text {font-size: 30rpx;margin-left: 20rpx;padding-top: 20rpx;}/*添加图片*/.addImv .chooseView {width: 180rpx;height: 180rpx;margin: 20rpx 20rpx;background-color: #f2f6f9;border: 1px dashed lightgray;text-align: center;line-height: 180rpx;/* padding: 0rpx 7rpx; */border-radius: 5px;margin-left: 40rpx;}.addImv .chooseImv {width: 50rpx;height: 50rpx;}/*已选择的图片*/.addImv .upFile {width: 180rpx;height: 180rpx;position: relative;padding: 0rpx 7rpx;margin-left: 40rpx;border: 1px solid #c0ccda;}.addImv .upFile .itemImv {width: 180rpx;height: 180rpx;padding: 0rpx 7rpx;}.addImv .upFile .closeImv {position: absolute;right: 0rpx;top: 0rpx;width: 50rpx;height: 50rpx;}.logoinfo {height: 128rpx; width: 128rpx; margin: 10rpx 10rpx 10rpx 10rpx;}.sureRelease {background-color: #e44178;color: white;position: fixed;width: 100%;bottom: 0rpx;}.icon {margin-left: 80rpx;}.tu {border: 3rpx solid rgba(0, 0, 0, 0.329); border-radius: 10rpx; height: 60rpx; width: 60rpx; margin: 20rpx 20rpx 20rpx 30rpx; padding: 60rpx 60rpx 60rpx 60rpx;}.logoinfo {height: 220rpx; width: 220rpx; margin: 10rpx 10rpx 10rpx 10rpx;}.tu1 {display: flex; flex-flow: row wrap; align-content: space-around;}.an {height: 90rpx; width: 270rpx; font-size: 38rpx; background-color: rgba(0, 0, 0, 0.288); font-weight: 600; color: white;}button::after {border: none;}.an1 {margin-top: 90rpx;}

服务器端接收图片的代码：文件名tpwztpController

package .controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.sun.istack.internal.logging.Logger;import javax.servlet.http.HttpServletRequest;import java.io.File;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.UUID;/*** 图片上传代码* @author a云淡风轻* @createtime 3月7日*/@Controller@RequestMapping("/tpwz")public class tpwztpController {// private Logger logger = Logger.getLogger(TupianjieshouController.class);/*** @createtime 3月7日* @param request* @param content* @return * @throws IOException*/@RequestMapping("/tupian.do")@ResponseBodypublic Object upload(HttpServletRequest request, @RequestParam(value = "file", required = false) MultipartFile file) throws IOException {System.out.println("执行upload");request.setCharacterEncoding("UTF-8");HashMap s = new HashMap();System.out.println("78910");if(!file.isEmpty()) {String path = null;String type = null;// 获取文件名String fileName = file.getOriginalFilename();System.out.println("上传的文件名为：" + fileName);// 获取文件的后缀名String suffixName = fileName.substring(fileName.lastIndexOf("."));System.out.println("上传的后缀名为：" + suffixName);// 文件上传后的路径String filePath = "/usr/upload/";String temp_str="";Date dt = new Date();SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");temp_str=sdf.format(dt);UUID uuid = UUID.randomUUID();File base = new File(filePath);if (! base.exists()) {base.mkdirs();}try {file.transferTo(new File(filePath +uuid.toString() + temp_str+suffixName));} catch (IllegalStateException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}int i;i=0;s.put("aaa", i);s.put("src", uuid.toString() + temp_str+suffixName);} return s;}}服务器端接收表单的代码：```csspackage .controller;import java.io.IOException;import java.io.UnsupportedEncodingException;import java.io.Writer;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;import java.sql.Statement;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;@Controller@RequestMapping("/wztp") //相似于命名空间,唯一标识一个Controller,防止名称重复public class tpwzwzController {Connection dbconn;/*** desc 返回字符串含义,指的是ModelAndView中的ViewName,也就是要跳转的页面* * @RequestMapping 请求的映射 映射到一个具体的方法 同value来指定,如果不写value也是默认给value赋值* @throws IOException */@RequestMapping("/wenzi.do")public void addUserByHttpServletRequest(HttpServletRequest request) throws IOException{String dburl = "jdbc:mysql://localhost:3306/******";//数据库名称换成你的String username ="root";String password = "******";//换成你的try{Class.forName("com.mysql.cj.jdbc.Driver");dbconn = DriverManager.getConnection(dburl,username,password);System.out.println("数据库连接成功");}catch (ClassNotFoundException e1){System.out.println(e1+"驱动程序找不到");}catch(SQLException e2){System.out.println(e2);}String biaoti1 = new String(request.getParameter("biaoti").getBytes("iso-8859-1"), "utf-8"); String neirong1 = new String(request.getParameter("neirong").getBytes("iso-8859-1"), "utf-8"); String zuozhe1 = new String(request.getParameter("zuozhe").getBytes("iso-8859-1"), "utf-8"); String fenlei1 = new String(request.getParameter("fenlei").getBytes("iso-8859-1"), "utf-8"); String lianjie1 = new String(request.getParameter("lianjie").getBytes("iso-8859-1"), "utf-8"); String beizhu1 = new String(request.getParameter("beizhu").getBytes("iso-8859-1"), "utf-8"); String shunxu1 = new String(request.getParameter("shunxu").getBytes("iso-8859-1"), "utf-8"); String beizhu2 = new String(request.getParameter("img").getBytes("iso-8859-1"), "utf-8"); String beizhu3="/tupian/";String beizhu4=beizhu3+beizhu2;Statement stmt; int rs = 0; String sql="insert into wenzhang (wenzhangbt,wenzhangneirong,wenzhangzuozhe,wenzhangfenlei,wenzhanglianjie,wenzhangbeizhu,fbsj,sxid) values ('"+biaoti1+"','"+neirong1+"','"+zuozhe1+"','"+fenlei1+"','"+lianjie1+"','"+beizhu4+"',now(),"+shunxu1+")";try {stmt = dbconn.createStatement();rs = stmt.executeUpdate(sql); } catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();} System.out.println("hello springmvc with annotation!");System.out.println(biaoti1); }}在这里插入代码片

存储的图片路径我在代码中已经拼接成浏览器可直接访问的路径。上面的演示代码中，我只保存了一张图片的路径，根据以上代码，读者很容易保存三张图片的路径。下一篇，小程序从服务器读取数据显示图片和文字。