微信小程序图片上传功能（提供前后端代码）

微信小程序图片上传功能（提供前后端代码）

最近有项目要用到图片上传功能，记录一下。做这个功能之前，要先配置好图片服务器，这个我有时间再整理配置方法。

微信小程序端

微信小程序图片上传采用的是wx.uploadFile这个函数，需要提前在微信小程序的官网将域名加入到这个函数中，还需要注意的一点是，wx.uploadFile与wx.request两个如果放在同一个模块中实现，会出现不同步的问题，两个函数是同时运行的，也就是说图片上传的反馈还没回来，提交表单的代码就已经执行了。导致图片上传不了表单。所以在编写代码时最好在选择图片时，就上传图片，然后再将反馈回来的图片信息通过wx.request提交给表单。

//选择图片与上传
 uploadimg: function () {
    var that = this;
    var source = that.data.source;
    wx.chooseImage({  //从本地相册选择图片或使用相机拍照
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

      success: function (res) {
        //console.log(res)
        //前台显示
        that.setData({
          source: res.tempFilePaths
        })

        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        // console.log(tempFilePaths)
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (source.length >= 9) {
            that.setData({
              source: source
            });
            return false;
          } else {

      var imgurllist = that.data.imgurllist;
      // console.log(tempFilePaths.length)
      var count = 0;
      wx.uploadFile({
        url: 你的URL
        filePath: tempFilePaths[i],
        name: 'uploadfile_ant',
        header: { "content-type": "application/json", "Cookie": "PLAY_SESSION=" + getApp().data.cookied },
        success: function (res) {
          count++;
          var imgmessage = JSON.parse(res.data)
          //  console.log(imgmessage.imgurl)
          if (imgmessage.state == "success") {
            that.setData({
              acjson: imgmessage.imgurl,
              imgurllist: imgmessage.imgurl,
            })
            imgurllist.push(imgmessage.imgurl);
            that.setData({
              imgurllist: imgurllist
            });
            //  console.log(that.data.imgurllist)
          } else {
            wx.hideLoading();
          }
          //如果是最后一张,则隐藏等待中  
          if (count == that.data.source.length) {
            wx.hideToast();
          }
        },
        fail: function (res) {
          wx.hideToast();
          wx.hideLoading();
          wx.showModal({
            title: '错误提示',
            content: '上传请假条失败',
            showCancel: false,
            success: function (res) {
            }
          })
        }
      });

            source.push(tempFilePaths[i]);
          }
          that.setData({
            source: source
          });
        }



      }
    })
  },

//删除图片功能
  deleteImg: function (e) {
    var source = this.data.source;
    var index = e.currentTarget.dataset.index;
    source.splice(index, 1);
    var imgurllist = this.data.imgurllist;
    imgurllist.splice(index, 1);
    this.setData({
      source: source,
      imgurllist: imgurllist
    });
  },
//获取图片索引
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var source = this.data.source;
    wx.previewImage({
      //当前显示图片
      current: source[index],
      //所有图片
      urls: source
    })
  },

后台处理

后台使用的语言是Scala，可以用分布式文件系统——FastDFS用来保存图片，也可以直接在nginx配置图片服务器，在映射到本地，本次后面那种方法，

 def fastdfsupload = authAction.async(parse.multipartFormData) {request =>
    Future{
      if(request.userInfo.map(_.id.last).getOrElse(0)!=0)
      {
        request.body.file("file").map { picture =>
//
          val filename = picture.filename
          val contentType = filename.substring(filename.lastIndexOf("."))
          val furl= UUID.randomUUID.toString+contentType

          picture.ref.moveTo(new File(XwConstant.setimgurl+furl),replace = true).setReadOnly()
         val path1=XwConstant.httpsurl+XwConstant.getimgurl+furl
         // Runtime.getRuntime.exec("chmod 777 " + path1) //给文件夹权限
          if(picture.ref.length()<1024*1024){
            val pictype="#@#DSA"+picture.contentType.last
            if(pictype.contains("#@#DSAimage/")){
              //val backurl=FastDFS.xbUpload(picture.ref,env.rootPath().getPath+"/conf/fdfs_client.conf",picture.filename.split('.').toList.last)  //这个是用了分布式文件系统——FastDFS  本次可以直接保存在本地的图片服务中，再在nginx配置好就可以了
              if(path1!="error"){
                Ok(Json.toJson(Map("state"->"success","imgurl"->path1)))
              }else{
                Ok(Json.toJson(Map("state"->"error1","msg"->"not found")))
              }
            }else{
              Ok(Json.toJson(Map("state"->"imageerror","msg"->"is not image")))
            }
          }else{
            Ok(Json.toJson(Map("state"->"error","msg"->"图片太大")))
          }

        }.getOrElse(
          Ok(Json.toJson(Map("state"->"error2","msg"->"p not found")))
        )
      }
      else
        Ok(Json.toJson(Map("state"->"error3","msg"->"u not found")))
    }
  }

路径文件

  /**
    * 保存img地址
    */
  val setimgurl="E:/XXX/XXXX/tem/"
  /**
    * 获取路径地址
    */
  val getimgurl="XXXX"

  /**
    * URL
    */
  val httpsurl="你的IP地址"