怎么在微信小程序中实现上传图片功能

这篇文章给大家介绍怎么在微信小程序中实现上传图片功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

wxml文件代码：

<view class="weui-cell">   <view class="weui-cell__bd">    <view class="weui-uploader">    <view class="weui-uploader__hd">    <view class="weui-uploader__title">营业执照</view>    <view class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</view>    </view>    <view class="weui-uploader__bd">    <view class="weui-uploader__files">    <block wx:for="{{imageList}}" wx:for-item="image">     <view class="weui-uploader__file">     <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>     </view>    </block>    </view>    <view class="weui-uploader__input-box">    <view class="weui-uploader__input" bindtap="chooseImage"></view>    </view>    </view>    </view>   </view>  </view>

js文件代码

chooseImage: function () {   var that = this;   console.log('aaaaaaaaaaaaaaaaaaaa')     wx.chooseImage({   count: this.data.count[this.data.countIndex],   success: function (res) {   console.log('ssssssssssssssssssssssssss')   //缓存下   wx.showToast({    title: '正在上传...',    icon: 'loading',    mask: true,    duration: 2000,    success: function (ress) {    console.log('成功加载动画');    }   })     console.log(res)   that.setData({    imageList: res.tempFilePaths   })   //获取第一张图片地址   var filep = res.tempFilePaths[0]   //向服务器端上传图片   // getApp().data.servsers,这是在app.js文件里定义的后端服务器地址   wx.uploadFile({    url: getApp().data.servsers + '/weixin/wx_upload.do',    filePath: filep,    name: 'file',    formData: {    'user': 'test'    },    success: function (res) {    console.log(res)    console.log(res.data)    var sss= JSON.parse(res.data)    var dizhi = sss.dizhi;    //输出图片地址    console.log(dizhi);    that.setData({    "dizhi": dizhi    })      //do something    }, fail: function (err) {    console.log(err)    }    });   }   })   },   previewImage: function (e) {   var current = e.target.dataset.src     wx.previewImage({     current: current,   urls: this.data.imageList   })   }

java 后端代码：

//获取当前日期时间的string类型用于文件名防重复   public String dates(){    Date currentTime = new Date();    SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");    String dateString = formatter.format(currentTime);    return dateString;   }   @RequestMapping("wx_upload.do")   public void uploadPicture(HttpServletRequest request, HttpServletResponse response,PrintWriter writer) throws Exception {   System.out.println("进入get方法！");   //获取从前台传过来得图片   MultipartHttpServletRequest req =(MultipartHttpServletRequest)request;   MultipartFile multipartFile = req.getFile("file");   //获取图片的文件类型   String houzhu=multipartFile.getContentType();   int one = houzhu.lastIndexOf("/");   System.out.println(houzhu.substring((one+1),houzhu.length()));   System.out.println(multipartFile.getName());   //根据获取到的文件类型截取出图片后缀   String type=houzhu.substring((one+1),houzhu.length());   System.out.println(multipartFile.getContentType());     String filename;   // request.getRealPath获取我们项目的根地址在加上我们要保存的地址   String realPath = request.getRealPath("/upload/wximg/");   try {    File dir = new File(realPath);    if (!dir.exists()) {    dir.mkdir();    }    //获取到当前的日期时间用户生成文件名防止文件名重复    String filedata=this.dates();   //生成一个随机数来防止文件名重复    int x=(int)(Math.random()*1000);    filename="zhongshang"+x+filedata;    System.out.println(x);   将文件的地址和生成的文件名拼在一起    File file = new File(realPath,filename+"."+type);    multipartFile.transferTo(file);   //将图片在项目中的地址和isok状态储存为json格式返回给前台，由于公司项目中没有fastjson只能用这个    JSONObject jsonObject=new JSONObject();    jsonObject.put("isok",1);    jsonObject.put("dizhi","/upload/wximg/"+filename+"."+type);      writer.write(jsonObject.toString());   } catch (IOException e) {    e.printStackTrace();   } catch (IllegalStateException e) {    e.printStackTrace();   }  }

来看一下之前在前端js输出的内容：

关于怎么在微信小程序中实现上传图片功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。