微信小程序> 微信小程序图片上传前后台完整案例多图片上传-微信小程序上传图片接口视频-微信小程序视频上传

微信小程序图片上传前后台完整案例多图片上传-微信小程序上传图片接口视频-微信小程序视频上传

浏览量:2226 时间: 来源:随心所欲的自由
image.wxml:1.

设置两个button,一个进行选择选择图片,另一个进行发布

formbindsubmit"formSubmit"id'2'bindreset"formReset"viewclass"big-logos"buttonbindtap"upimg"拍照/buttonblockwx:for"{{img_arr}}"viewclass'logoinfo'imagesrc'{{item}}'/image/view/block/viewbuttonclass'btn'formType"submit"发布/button/formimage.js:(formData传递参数),可以上传多张图片,但是有个bug,每次上传都要调一次接口,有好的解决方案,请指教varadds{};Page({data:{img_arr:[],formdata:'',},formSubmit:function(e){//varide.target.id//addse.detail.value;//adds.program_idapp.jtappid//adds.openidapp._openid//adds.zx_info_idthis.data.zx_info_idthis.upload();console.log(adds);},upload:function(){varthatthisvarimgfile;for(vari0;ithis.data.img_arr.length;i++){//循环遍历图片wx.uploadFile({url:'',//自己的接口地址filePath:that.data.img_arr[i],name:'content',header:{"Content-Type":"multipart/form-data",'accept':'application/json','Authorization':'okgoodit'//若有token,此处换上你的token,没有的话省略},formData:({//上传图片所要携带的参数userName:"";}),success:function(res){console.log(res)if(res){console.log("返回的参数信息"+res.data)wx.showToast({title:'已提交发布!',duration:3000});}}})}this.setData({username:'CMOS180404',password:'ecb01ff6-2e5c-11e8-b467-0ed5f89f718b'})},upimg:function(){varthatthis;if(this.data.img_arr.length3){wx.chooseImage({sizeType:['original','compressed'],//可以指定是原图还是压缩图,默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有success:function(res){that.setData({img_arr:that.data.img_arr.concat(res.tempFilePaths)});}})}else{wx.showToast({title:'最多上传三张图片',icon:'loading',duration:3000});}},})//Java后台接收并解析packagecom.lovepet.pet.biz.controller;importcom.alibaba.fastjson.JSON;importcom.alibaba.fastjson.JSONArray;importcom.lovepet.pet.common.Result;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.multipart.MultipartFile;importorg.springframework.web.multipart.support.StandardMultipartHttpServletRequest;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.File;importjava.io.FileOutputStream;importjava.io.OutputStream;importjava.io.PrintWriter;importjava.util.HashMap;importjava.util.Iterator;importjava.util.UUID;/***图片上传**@authorFanChen*@since2018年6月1日上午12:46:29*/@Controller@RequestMapping("/upload")publicclassUploadController{privatestaticfinalLoggerloggerLoggerFactory.getLogger(UploadController.class);@RequestMapping("/picture")publicvoiduploadPicture(HttpServletRequestrequest,HttpServletResponseresponse)throwsException{ResultresultnewResult();//获取文件需要上传到的路径FiledirectorynewFile("..");Stringpathdirectory.getCanonicalPath()+"\upload\";//判断存放上传文件的目录是否存在(不存在则创建)FiledirnewFile(path);if(!dir.exists()){dir.mkdir();}logger.debug("path"+path);request.setCharacterEncoding("utf-8");//设置编码try{StandardMultipartHttpServletRequestreq(StandardMultipartHttpServletRequest)request;//获取formdata的值IteratorStringiteratorreq.getFileNames();Stringusernamerequest.getParameter("username");Stringpasswordrequest.getParameter("password");Stringtimedatarequest.getParameter("timedata");while(iterator.hasNext()){MultipartFilefilereq.getFile(iterator.next());//真正写到磁盘上StringuuidUUID.randomUUID().toString().replace("-","");StringnewNameuuid+"."+"jpg";Filefile1newFile(path+newName);OutputStreamoutnewFileOutputStream(file1);out.write(file.getBytes());out.close();}}catch(Exceptione){logger.error("",e);}result.setValue(jsonArray);PrintWriterprintWriterresponse.getWriter();response.setContentType("application/json");response.setCharacterEncoding("utf-8");printWriter.write(JSON.toJSONString(result));printWriter.flush();}}本篇文章借鉴了很多前辈的经验,本人也就是个菜鸟,如果有些地方写的不对,请多多指教

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎