微信小程序之与servlet进行通信（图片+文字）
最近做一个小程序商城 前端很快就解决了，各种资源抄一抄 改一改 就那么回事了
后端真是把我折磨够呛，图书馆借了本书后端是用php写的，我之前根本没有接触过php 在挣扎了很久之后，选择了更熟悉的java_web进行后端的开发，spring_mvc我也不会，，，网上的代码也看不懂，最后被逼无奈，只能选择了最简单的servlet进行小程序的通信
前端代码及图片展示：
index.wxml:
index.wxss:
@import "/weui.wxss";
这里使用的是微信官方的css框架，自行百度下载，然后放在了这个位置 大家不要放错文件夹
index.js代码：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
},
chose() {
var that = this;
console.log('aaaaaaaaaaaaaaaaaaaa')
wx.chooseImage({
count: 2,
success: function (res) {
console.log('ssssssssssssssssssssssssss')
//缓存下
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 2000,
success: function (ress) {
console.log('成功加载动画');
}
})
console.log(res)
that.setData({
imageList: res.tempFilePaths
})
//获取第一张图片地址
var filep = res.tempFilePaths[0]
//向服务器端上传图片
// getApp().data.servsers,这是在app.js文件里定义的后端服务器地址
wx.uploadFile({
url: 'http://localhost:8080/wx_upload/upload.do',
filePath: filep,
header: { "Content-Type": "multipart/form-data" },
name: 'image',
formData: {
a: encodeURI("123fdsfdsa12"),
b: encodeURI("12312"),
},
success: function (res) {
console.log(res)
console.log(res.data)
//do something
}, fail: function (err) {
console.log(err)
}
});
}
})
},
previewImage: function (e) {
var current = e.target.dataset.src
wx.previewImage({
current: current,
urls: this.data.imageList
})
}
})
看一下效果：
有点小瑕疵 不重要 功能OK
接下来 后端代码编写
安利一个网址下载所需要的包：http://maven.ibiblio.org/maven2/ 别在csdn或者其他地方下载，我之前在csdn下了几个包出了一堆错误，还有这里边所有包的版本要和上图一致的下载
web.xml servlet配置如下图:
servlet代码：
package com.wangzhihan;
import java.io.File;
import java.io.IOException;
import java.net.URLDecoder;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class wechat
*/
public class wx_upload extends HttpServlet {
private static final long serialVersionUID = 1L;
private String uploadFilePath = "D:\\upload";
File tempFile;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("图片存放");
request.setCharacterEncoding("UTF-8");
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (isMultipart)
{
String dir = "D:\\upload";
File dirFile = new File(dir);
if (!dirFile.exists()) {
System.out.println("文件夹不存在，正在自动创建文件夹");
dirFile.mkdirs();
System.out.println("文件夹创建成功");
}
try
{
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload fileUpload = new ServletFileUpload(factory);
List
for (FileItem item : items) {
if (item.isFormField())
{
String name = item.getFieldName();
System.out.println(name+" "+URLDecoder.decode(item.getString(), "utf-8"));
}
else
{
System.out.println(dir);
System.out.println("item.getName=" + item.getName());
String longFileName = item.getName();
System.out.println("longFileName:" + longFileName);
char indexChar = '\\';
String fileName = item.getName().substring(longFileName.lastIndexOf(indexChar) + 1, longFileName.length());
System.out.println("filePath=" + dir + "\\" + fileName);
File saveFile = new File(dirFile, fileName);
item.write(saveFile);
}
}
System.out.println("存取成功");
}
catch (Exception e)
{
e.printStackTrace();
}
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
若servlet访问出现404 看这里https://blog.csdn.net/wp950802/article/details/82354474
最后 在微信小程序上传一个图片
最终效果:
看 他在那呆的挺好
源码:https://download.csdn.net/download/weixin_39750489/10942176
OK 还有什么问题的我们可以一起交流 微信:15046053541