今天扣丁学堂小编给大家详细介绍一下关于HTML5视频教程微信小程序上传图片功能及后端代码，几乎每个程序都需要用到图片，在小程序中我们可以通过image组件显示图片，当然小程序也是可以上传图片的，微信小程序文档也写的很清楚。下面我们来一起看一下吧。
通过wx.chooseImage(OBJECT)实现
官方示例代码
发布文章wx.chooseImage({
count:1,//默认9
sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
vartempFilePaths=res.tempFilePaths
}
})
图片最多可以选择9张,也可以通过拍摄照片实现，当选择完图片之后会获取到图片路径,这个路径在本次启动期间有效。
如果需要保存就需要用wx.saveFile(OBJECT)
通过wx.uploadFile(OBJECT)可以将本地资源文件上传到服务器。
原理就是客户端发起一个HTTPSPOST请求，其中content-type为multipart/form-data。
官方示例代码
wx.chooseImage({
success:function(res){
vartempFilePaths=res.tempFilePaths
wx.uploadFile({
url:'http://www.codingke.com/upload',//仅为示例，非真实的接口地址
filePath:tempFilePaths[0],
name:'file',
formData:{
'user':'test'
},
success:function(res){
vardata=res.data
//dosomething
}
})
}
})
示例代码
看完了官方文档,写一个上传图片就没有那么麻烦了,下面是真实场景的代码
importconstantfrom'../../common/constant';
Page({
data:{
src:"../../image/photo.png",//绑定image组件的src
//略...
},
onLoad:function(options){
//略...
},
uploadPhoto(){
varthat=this;
wx.chooseImage({
count:1,//默认9
sizeType:['compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
vartempFilePaths=res.tempFilePaths;
upload(that,tempFilePaths);
}
})
}
})
functionupload(page,path){
wx.showToast({
icon:"loading",
title:"正在上传"
}),
wx.uploadFile({
url:constant.SERVER_URL+"/FileUploadServlet",
filePath:path[0],
name:'file',
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;
}
vardata=res.data
page.setData({//上传成功修改显示头像
src:path[0]
})
},
fail:function(e){
console.log(e);
wx.showModal({
title:'提示',
content:'上传失败',
showCancel:false
})
},
complete:function(){
wx.hideToast();//隐藏Toast
}
})
}
后端代码
publicclassFileUploadServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
privatestaticLoggerlogger=LoggerFactory.getLogger(FileUploadServlet.class);
publicFileUploadServlet(){
super();
}
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
JsonMessage<Object>message=newJsonMessage<Object>();
EOSResponseeosResponse=null;
StringsessionToken=null;
FileItemfile=null;
InputStreamin=null;
ByteArrayOutputStreamswapStream1=null;
try{
request.setCharacterEncoding("UTF-8");
//1、创建一个DiskFileItemFactory工厂
DiskFileItemFactoryfactory=newDiskFileItemFactory();
//2、创建一个文件上传解析器
ServletFileUploadupload=newServletFileUpload(factory);
//解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
//1.得到FileItem的集合items
List<FileItem>items=upload.parseRequest(request);
logger.info("items:{}",items.size());
//2.遍历items:
for(FileItemitem:items){
Stringname=item.getFieldName();
logger.info("fieldName:{}",name);
//若是一个一般的表单域,打印信息
if(item.isFormField()){
Stringvalue=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);
}
StringuserId=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=newByteArrayOutputStream();
in=file.getInputStream();
byte[]buff=newbyte[1024];
intrc=0;
while((rc=in.read(buff))>0){
swapStream1.write(buff,0,rc);
}
Usrusr=newUsr();
usr.setObjectId(Integer.parseInt(userId));
finalbyte[]bytes=swapStream1.toByteArray();
eosResponse=ServerProxy.getSharedInstance().saveHeadPortrait(usr,newRequestOperation(){
@Override
publicvoidaddValueToRequest(EOSRequestrequest){
request.addMedia("head_icon_media",newEOSMediaData(EOSMediaData.MEDIA_TYPE_IMAGE_JPEG,bytes));
}
});
//请求成功的场合
if(eosResponse.getCode()==0){
message.setStatus(ConstantUnit.SUCCESS);
}else{
message.setStatus(String.valueOf(eosResponse.getCode()));
}
}
}catch(Exceptione){
e.printStackTrace();
}finally{
try{
if(swapStream1!=null){
swapStream1.close();
}
}catch(IOExceptione){
e.printStackTrace();
}
try{
if(in!=null){
in.close();
}
}catch(IOExceptione){
e.printStackTrace();
}
}
PrintWriterout=response.getWriter();
out.write(JSONObject.toJSONString(message));
}
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
doGet(request,response);
}
}
后端是用java写的，一开始的时候，后端开始用了一些框架接收上传的图片，出现了各种问题，后来使用了纯粹的Servlet就没有了问题,把代码贴出来省的以后麻烦了。
注意：代码使用了公司内部的框架，建议修改后再使用
以上就是关于扣丁学堂HTML5视频教程之微信小程序图片上传及源码的全部内容，希望对大家的学习有所帮助，想要了解更多内容的小伙伴可以登录扣丁学堂官网查询。扣丁学堂是专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5在线教程供学员挂看学习哦。扣丁学堂H5技术交流群：692172929。微信号：codingbb
*博客内容为网友个人发布，仅代表博主个人观点，如有侵权请联系工作人员删除。
