微信小プログラム画像アップロード機能(前後端コード提供)

微信小プログラム画像アップロード機能(前後端コード提供)
最近、画像アップロード機能を使うプロジェクトがあるので、記録しておきます.この機能を作る前に、まず画像サーバーを配置して、これは私が配置方法を整理する時間があります.
ウィーチャットウィジェット
微信小プログラムの画像アップロードはwxを採用している.uploadFileという関数は、事前に微信ウィジェットの公式サイトでドメイン名をこの関数に追加する必要があります.また、wx.uploadFileとwx.requestの2つが同じモジュールに配置されて実装されると、同期しないという問題が発生し、2つの関数が同時に実行されます.つまり、画像アップロードのフィードバックが戻ってこないので、フォームをコミットするコードはすでに実行されています.画像がフォームにアップロードされません.したがって、コードを記述する際には、画像を選択する際に、画像をアップロードし、フィードバックされた画像情報を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  "