微信小程序上傳圖片及本地測試

前端(.wxml)

<view id="view1">
  <view id="btns">
    <image id="ima1" mode="aspectFitf" src="{{src}}"></image>
    <button type="primary" bindtap="btntakephoto">拍攝照片</button>
    <button type="primary" bindtap="btnchoosephoto">選擇照片</button>
    <button type="primary" bindtap="btnupload">上傳</button>
  </view>
</view>

樣式(wxss)

button{
  margin: 8rpx;
  padding: 0rpx;
  font-size: 30rpx;
  width: 200rpx;
  float: left;
}
#view1
{
  width: 100%;
  height: 100%;
}
#btns
{
  margin: 0 50rpx;
  padding: 0rpx;
}
image{
  width: 650rpx;
  height: 1050rpx;
  background-color: lavender;
}

js(.js)

Page({
  data: {
    filepath:"",
  },
  onLoad: function (options) {
    this.ctx = wx.createCameraContext()
  },
  //拍攝照片
  btntakephoto: function () {
    this.ctx.takePhoto({ 
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath,
          filepath: res.tempImagePath[0],
        })
      }
    })
  },
  //選擇照片
  btnchoosephoto: function() {
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original'],
      sourceType: ['camera'],
      success:(res) => {
        this.setData({
          src: res.tempFilePaths[0],
          filepath: res.tempFilePaths[0],
        });
      }
    })
  },
  //上傳圖片
  btnupload: function () {
    if (this.data.filepath == "")
    {
      wx.showToast({
        title: '沒有選擇圖片',
        icon: 'none',
        duration: 2000
      })
    }
    else
    {
      wx.uploadFile({
        url: 'http://localhost:9965/api/image/WxPostFile',
        filePath: this.data.filepath,
        name: 'file',
        formData: {
          filename: '123456789'
        },
        success(res) {
          console.log(res);
          wx.showToast({
            title: "上傳成功",
            icon: 'success',
            duration: 2000
          })
        }
      })
    }
  }
})

json配置(.json)

{
  "navigationBarTitleText": "上傳圖片",
  "navigationBarBackgroundColor": "#003a9b",
  "navigationBarTextStyle": "white"
}

后台c#

 #region 測試微信小程序圖片上傳
        [HttpPost]
        public HttpResponseMessage WxPostFile()
        {
            bool isSuccess = false;
            try
            {
                HttpPostedFile file = HttpContext.Current.Request.Files[0];
                var filename = HttpContext.Current.Request["filename"];
                string path = AppDomain.CurrentDomain.BaseDirectory + "Out";
                if (!Directory.Exists(path))
                    Directory.CreateDirectory(path);
                //var mapPath = HttpContext.Current.Server.MapPath(path); //硬盤物理目錄
                var fileExt = Path.GetExtension(file.FileName);//文件后綴名(.png)
                var mapPathFullPath = path + "\\" + filename + fileExt; //硬盤物理路徑
                file.SaveAs(mapPathFullPath);
                isSuccess = true;
            }
            catch (Exception ex)
            {
                isSuccess = false;
            }
            var resultObj = JsonConvert.SerializeObject(isSuccess);
            HttpResponseMessage result = new HttpResponseMessage
            {
                Content = new StringContent(resultObj, Encoding.GetEncoding("UTF-8"), "application/json")
            };
            return result;
        }
        #endregion

本地測試