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();}}本篇文章借鉴了很多前辈的经验,本人也就是个菜鸟,如果有些地方写的不对,请多多指教
微信小程序图片上传前后台完整案例多图片上传-微信小程序上传图片接口视频-微信小程序视频上传
浏览量:2226
时间:
来源:随心所欲的自由
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。










