マイクロ手紙アプレット画像のアップロードとプレビュー

次のような効果があります

wxml：

<view class="container">
<image class="image" src="{{imgPath}}" mode='scaleToFill' bindtap="previewImg"></image>
<button bindtap="selectImg">选择图片</button>
<button bindtap="loadImg">上传图片</button>
</view>

画像を選択

wx.chooseImage(object)アルバムや使用カメラから画像を選択

パラメータ	タイプ	必須の	説明
カウント	数	ノー	写真の数、デフォルト9まで選択
たSizeType	StringArray	ノー	;：元の圧縮元：図を圧縮し、両方のデフォルト
ソースの種類	StringArray	ノー	アルバム：アルバムの選択;カメラ：カメラ、両方のデフォルト
成功	関数	それはあります	コールバック関数の戻り値成功
不合格	関数	ノー	失敗コールバック関数
complate	関数	ノー	完了コールバック関数

selectImg: function () {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        //res.tempFilePaths 返回图片本地文件路径列表
        var tempFilePaths = res.tempFilePaths;
        that.setData({
          imgPath: tempFilePaths[0]
        })

      }
    })

  }

画像のプレビュー

wx.previewImage(object)画像のプレビュー

パラメータ	タイプ	必須の	説明
現在	弦	ノー	現在、表示された画像のリンクは、最初のデフォルトのURLを記入しません
URLを	StringArray	それはあります	あなたは、リストをリンクされた画像をプレビューする必要があります
成功	関数	ノー	コールバック関数の戻り値成功
不合格	関数	ノー	失敗コールバック関数
コンプリート	関数	ノー	完了コールバック関数

previewImg: function (e) {
    var img = this.data.imgPath;
    // 设置预览图片路径
    wx.previewImage({
      current: img,
      urls: [img]
    })
  }

写真をアップロード

前に前に長い時間を使ってJFinal上传使用する際にバックエンドインターフェイス

Jfinalファイルのアップロード

loadImg: function () {
    var that = this;
    wx.uploadFile({
      url: "http://localhost:8080/upload/upload",
      filePath: that.data.imgPath,
      name: "upload_file",
      // 请求携带的额外form data
      /*formData: {
        "id": id
      },*/
      header: {
        'Content-Type': "multipart/form-data"
      },
      success: function (res) {
        wx.showToast({
          title: "图像上传成功！",
          icon: "",
          duration: 1500,
          mask: true
        });
      },
      fail: function (res) {
        wx.showToast({
          title: "上传失败，请检查网络或稍后重试。",
          icon: "none",
          duration: 1500,
          mask: true
        });
      }

    })
  }