EEPW论坛

今天扣丁学堂小编给大家详细介绍一下关于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