几乎每个程序都需要用到图片，在小程序中我们可以通过image组件显示图片。
当然小程序也是可以上传图片的，nofollow" target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html?t=20161122%20#wxuploadfileobject">微信小程序文档也写的很清楚。
上传图片
首先选择图片
通过
官方示例代码
图片最多可以选择9张,也可以通过拍摄照片实现，当选择完图片之后会获取到图片路径,这个路径在本次启动期间有效。
如果需要保存就需要用
通过文件上传到服务器。 原理就是客户端发起一个 HTTPS POST 请求，其中 content-type为 multipart/form-data。
官方示例代码
示例代码
看完了官方文档,写一个上传图片就没有那么麻烦了,下面是真实场景的代码
function upload(page,path) {
wx.showToast({
icon: "loading",title: "正在上传"
}),wx.uploadFile({
url: constant.SERVER_URL + "/FileUploadServlet",filePath: path[0],header: { "Content-Type": "multipart/form-data" },formData: {
//和服务器约定的token,一般也可以放在header中
'session_token': wx.getStorageSync('session_token')
},success: function (res) {
console.log(res);
if (res.statusCode != 200) {
wx.showModal({
title: '提示',content: '上传失败',showCancel: false
})
return;
}
var data = res.data
page.setData({ //上传成功修改显示头像
src: path[0]
})
},fail: function (e) {
console.log(e);
wx.showModal({
title: '提示',showCancel: false
})
},complete: function () {
wx.hideToast(); //隐藏Toast
}
})
}
后端代码
后端是用java写的，一开始的时候，后端开始用了一些框架接收上传的图片，出现了各种问题，后来使用了纯粹的Servlet就没有了问题,把代码贴出来省的以后麻烦了。
private static Logger logger = LoggerFactory.getLogger(FileUploadServlet.class);
public FileUploadServlet() {
super();
}
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
JsonMessage
//1、创建一个DiskFileItemFactory工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//2、创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory);
//解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
// 1. 得到 FileItem 的集合 items
List
logger.info("items:{}",items.size());
// 2. 遍历 items:
for (FileItem item : items) {
String name = item.getFieldName();
logger.info("fieldName:{}",name);
// 若是一个一般的表单域,打印信息
if (item.isFormField()) {
String value = item.getString("utf-8");
if("session_token".equals(name)){
sessionToken = value;
}
}else {
if("file".equals(name)){
file = item;
}
}
}
//session校验
if(StringUtils.isEmpty(sessionToken)){
message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);
message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);
}
String userId = RedisUtils.hget(sessionToken,"userId");
logger.info("userId:{}",userId);
if(StringUtils.isEmpty(userId)){
message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);
message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);
}
//上传文件
if(file == null){
}else{
swapStream1 = new ByteArrayOutputStream();
in = file.getInputStream();
byte[] buff = new byte[1024];
int rc = 0;
while ((rc = in.read(buff)) > 0) {
swapStream1.write(buff,rc);
}
Usr usr = new Usr();
usr.setObjectId(Integer.parseInt(userId));
final byte[] bytes = swapStream1.toByteArray();
eosResponse= ServerProxy.getSharedInstance().saveHeadPortrait(usr,new RequestOperation() {
@Override
public void addValueToRequest(EOSRequest request) {
request.addMedia("head_icon_media",new EOSMediaData(EOSMediaData.MEDIA_TYPE_IMAGE_JPEG,bytes));
}
});
// 请求成功的场合
if (eosResponse.getCode() == 0) {
message.setStatus(ConstantUnit.SUCCESS);
} else {
message.setStatus(String.valueOf(eosResponse.getCode()));
}}
} catch (Exception e) {
e.printStackTrace();
} finally{
try {
if(swapStream1 != null){
swapStream1.close();
}
} catch (IOException e) {
e.printStackTrace();
}
try {
if(in != null){
in.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
PrintWriter out = response.getWriter();
out.write(JSONObject.toJSONString(message));
}
protected void doPost(HttpServletRequest request,IOException {
doGet(request,response);
}
}
