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

   简单来说是先执行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: 'https://www.bcxxjl.com/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: 'https://www.bcxxjl.com/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 com.cn.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 2022年3月7日*/
@Controller
@RequestMapping("/tpwz")
public class tpwztpController {// private Logger logger = Logger.getLogger(TupianjieshouController.class);/*** @createtime 2022年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;}
}
服务器端接收表单的代码：```css
package com.cn.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="https://www.bcxxjl.com/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);    }}在这里插入代码片

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

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

微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传多个图片
在实际开发中,很多时候都需要要上传图片,但是对于上传多张时需要一张张的上传,因为图片都可能比较大,这时就需要我们对上传图片的API进行进一步的处理,这样就解决了我们同时选择上传多张图片需求.所以为了方 ...
轻松实现微信小程序上传多文件/图片到腾讯云对象存储COS（免费额度）
概述对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据. 个人账户首次开通COS可以免费领取50GB 标准存 ...
微信小程序上传文件及图片（可以预览）
最近在写小程序项目,碰到了一个需求,需要用户可以上传各种类型的文件和图片,展示在页面上,并且点击还可以进行预览,就找了找微信小程序官网,写了一个例子,分享一下直接看代码: wxml: <vie ...
微信小程序上传文件（图片/word等）功能)
说到上传文件,首先要想到微信官方文档给的API,wx.uploadFile({ }) 通过这个API来达到上传至服务器的效果:代码示例如下接下来我们先来说说上传图片功能,这个比较简单一些上传图片: ...
《微信小程序-证件照换底色》之二：用pycharm搭建django框架来接收微信小程序上传的图片
用pycharm搭建django框架来接收微信小程序的图片上一篇:微信云开发实现每个用户在云端上传并且下载自己对应的图片链接: https://blog.csdn.net/qq_44933075/ ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
小程序上传文件到阿里云oss
本文仅举例上传图片和上传视频! 准备工作: 需要引入的js文件:https://download.csdn.net/download/impossible1994727/12328614 参考文档:h ...

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

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

最新文章

热门文章