微信小程序图片上传前后台完整案例（多图片上传）

image.wxml：

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

  <form bindsubmit="formSubmit" id='2' bindreset="formReset">  <view class="big-logos">  <button  bindtap="upimg">拍照</button>   <block wx:for="{{img_arr}}">  <view class='logoinfo'>  <image src='{{item}}'></image>  </view>  </block>  </view>  <button class='btn' formType="submit">发布</button>
</form>

image.js:(formData传递参数)，可以上传多张图片，但是有个bug，每次上传都要调一次接口，有好的解决方案，请指教

var adds = {};
Page({data: {img_arr: [],formdata: '',},formSubmit: function (e) {// var id = e.target.id// adds = e.detail.value;// adds.program_id = app.jtappid// adds.openid = app._openid// adds.zx_info_id = this.data.zx_info_idthis.upload();console.log(adds);},upload: function () {var that = thisvar imgfile;for (var i = 0; i < this.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 () {var that = this;if (this.data.img_arr.length < 3) {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后台接收并解析

package com.lovepet.pet.biz.controller;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.lovepet.pet.common.Result;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.support.StandardMultipartHttpServletRequest;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.UUID;/*** 图片上传** @author FanChen* @since 2018年6月1日 上午12:46:29*/
@Controller
@RequestMapping("/upload")
public class UploadController {private static final Logger logger = LoggerFactory.getLogger(UploadController.class);@RequestMapping("/picture")public void uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {Result result = new Result();//获取文件需要上传到的路径File directory = new File("..");String path = directory.getCanonicalPath() + "\\upload\\";// 判断存放上传文件的目录是否存在（不存在则创建）File dir = new File(path);if (!dir.exists()) {dir.mkdir();}logger.debug("path=" + path);request.setCharacterEncoding("utf-8"); //设置编码try {StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;//获取formdata的值Iterator<String> iterator = req.getFileNames();String username=request.getParameter("username");String password=request.getParameter("password");String timedata=request.getParameter("timedata");while (iterator.hasNext()) {MultipartFile file=req.getFile(iterator.next());//真正写到磁盘上String uuid=UUID.randomUUID().toString().replace("-","");String newName=uuid+"."+"jpg";File file1=new File(path+newName);OutputStream out=new FileOutputStream(file1);out.write(file.getBytes());out.close();}} catch (Exception e) {logger.error("", e);}result.setValue(jsonArray);PrintWriter printWriter = response.getWriter();response.setContentType("application/json");response.setCharacterEncoding("utf-8");printWriter.write(JSON.toJSONString(result));printWriter.flush();}}

本篇文章借鉴了很多前辈的经验，本人也就是个菜鸟，如果有些地方写的不对，请多多指教

微信小程序图片上传前后台完整案例（多图片上传）相关推荐

微信小程序开发 - 实现pdf、word等格式文件上传到后端的方法
写在前面我发现,微信的wx.uploadFile接口限制好多,而且会经常性出现bug,所以今天搜了一上午的资料, 看看能不能不要通过这个接口上传multipart/form-data格式的文件. 后 ...
解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
微信小程序开发：学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参页面跳转一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
视频教程-微信小程序开发【初级篇 / 附案例】-微信开发
微信小程序开发[初级篇 / 附案例] 北风网讲师!瓢城Web俱乐部创始人,教学总监! 李炎恢 ¥129.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程, ...
微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...
微信小程序自定义相机拍照，计算大小，以及上传
需求:近来微信小程序有个需求,自定义相机拍照,并且要在相机中画一个框,提示用户把拍摄内容放入框中,类似于上传身份证时那个头像,国徽对其的框.(因为我们上传的是一份A4纸的病例),所以需要这样.然后后台 ...
微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储，发动态功能
pages/upVideo.wxml //获取用户的头像和昵称展示 <view class="headerBox"><image src="{{user ...

微信小程序图片上传前后台完整案例（多图片上传）

微信小程序图片上传前后台完整案例（多图片上传）相关推荐

最新文章

热门文章