微信小程序開發之多圖片上傳+.NET WebAPI後端服務保存圖片資源

前言：

　　最近開發的一個微信小程序項目須要作一個同時選中三張（或者是多張）圖片一塊兒上傳到服務端，服務端保存圖片資源並保存的功能。發如今微信小程序開發中會有不少場景會使用到多圖片上傳並保存到的功能，因此我把本身總結的一些方法和完整示例寫了下來但願可以幫到有須要的同窗。

使用技術：

　　在這章中將會使用到微信小程序wx.uploadFile(Object object) 和wx.chooseImage(Object object)接口，對圖片大小和來源進行上傳，後端則使用的.NET WebAPI來接收圖片資源文件並保存。

wx.chooseImage() 概述：

　　從本地相冊選擇圖片或使用相機拍照，詳細瞭解請閱讀微信小程序開發文檔（https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html?search-key=wx.chooseimage）

參數：

屬性	類型	默認值	必填	說明
count	number	9	否	最多能夠選擇的圖片張數
sizeType	Array.<string>	['original', 'compressed']	否	所選的圖片的尺寸
sourceType	Array.<string>	['album', 'camera']	否	選擇圖片的來源
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

wx.uploadFile()概述：

　　將本地資源上傳到服務器。客戶端發起一個 HTTPS POST 請求，其中 content-type 爲 multipart/form-data，詳細瞭解請閱讀微信小程序開發文檔（https://developers.weixin.qq.com/miniprogram/dev/api/wx.uploadFile.html?q=wx.uploadFile）。

參數：

屬性	類型	默認值	必填	說明
url	string		是	開發者服務器地址
filePath	string		是	要上傳文件資源的路徑
name	string		是	文件對應的 key，開發者在服務端能夠經過這個 key 獲取文件的二進制內容
header	Object		否	HTTP 請求 Header，Header 中不能設置 Referer
formData	Object		否	HTTP 請求中其餘額外的 form data
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

廢話很少說，上代碼：

小程序頁面代碼：

<view class='form-s2'>
<view>門店照片(請選擇三張)</view>
<view>
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{files}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}" style='margin-top:11px;'>
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
</view>
<view class="weui-uploader__input-box" style='top:11px;'>
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>

小程序Js代碼:

Page({ /** * 頁面的初始數據 */ data: { files: [], //門店圖片信息,數組圖片保存做爲數據源
}， , /** * 多圖片上傳 */ chooseImage: function(e) { var that = this; if (that.data.files.length > 2) { resource.notishi("抱歉最多隻容許上傳三張圖片喲~"); return false; } wx.chooseImage({ count: 3, //默認9張，這裏設置三張
sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
success: function(res) { 
wx.showLoading({ title: '上傳中,請稍等...', })
 // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
 //多圖片上傳，tempFilePaths本地圖片地址爲一個數組，遍歷調用服務器圖片上傳接口便可實現多圖保存
for (var i = 0; i < tempFilePaths.length; i++) { console.log('圖片地址名稱' + tempFilePaths[i]); wx.uploadFile({ url: app.globalData.hostUrl + "/api/PictureUpload/Upload", //此處爲實際接口地址
filePath: tempFilePaths[i], //獲取圖片路徑
header: { 'content-type': 'multipart/form-data' }, name: 'upload', success: function(res) {
 wx.hideLoading(); let Result = JSON.parse(res.data); console.log(Result);//接收返回來的服務器圖片地址
if (Result.code == 1) { let picurl = app.globalData.hostUrl + Result.picturePath; console.log(picurl); that.setData({ files: that.data.files.concat(picurl)
 }); } 
else 
{ resource.notishi("網絡異常，請稍後再試"); } }, fail: function(res) { wx.hideLoading() wx.showToast({ title: '上傳失敗，請從新上傳', icon: 'none', duration: 2000 }) }, }) } } }) }, //圖片預覽
previewImage: function(e) { wx.previewImage({ current: e.currentTarget.id, // 當前顯示圖片的http連接
urls: this.data.files // 須要預覽的圖片http連接列表
})}, })

.NET WebAPI接口服務接收圖片資源並保存： 

後端使用MultipartMemoryStreamProvider來上傳文件，詳情以下所示：

using System; using System.IO; using System.Net.Http; using System.Threading.Tasks; using System.Web.Hosting; using System.Web.Http; namespace ShopSite.Controllers { public class FileUploadController : ApiController { /// <summary>
        /// 圖片上傳保存 /// </summary>
        /// <returns></returns>
 [HttpPost] public IHttpActionResult PictureUpload() { try { var picturePath = ""; const string fileTypes = "gif,jpg,jpeg,png,bmp";//運行上傳的圖片文件格式
                var content = Request.Content;//獲取或設置 HTTP 消息的內容（當須要獲取HTTP信息是會使用到）
                const string tempUploadFiles = "/UploadFile/"; //保存路徑
                var newFilePath = DateTime.Now.ToString("yyyy-MM-dd") + "/"; var memoryStreamProvider = new MultipartMemoryStreamProvider();//獲取圖片文件流信息
 Task.Run(async () => await Request.Content.ReadAsMultipartAsync(memoryStreamProvider)).Wait(); foreach (var item in memoryStreamProvider.Contents) { if (item.Headers.ContentDisposition.FileName == null) continue; var filename = item.Headers.ContentDisposition.FileName.Replace("\"", ""); var file = new FileInfo(filename); //upload fail（判斷是不是運行上傳的圖片格式）
                    if (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) == -1) { return Json(new { code =0,picturePath ="", msg = "不支持上傳文件類型" }); } //獲取後綴
                    var extension = Path.GetExtension(filename); var newFileName = Guid.NewGuid().ToString()+extension;//重命名

                    if (!Directory.Exists(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath)) { Directory.CreateDirectory(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath); } var filePath = Path.Combine(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath, newFileName); picturePath=Path.Combine(tempUploadFiles + newFilePath, newFileName);//圖片相對路徑

                    var result = item.ReadAsStreamAsync().Result; using (var br = new BinaryReader(result)) { var data = br.ReadBytes((int)result.Length); File.WriteAllBytes(filePath, data);//保存圖片
 } } //save successfully
                return Json(new { code = 1, picturePath = picturePath,msg = "圖片上傳成功~" }); } catch (Exception ex) { return Json(new { code =0, msg = ex.Message }); } } } }

 

效果圖展現（美女喲，嘻嘻）：

總結：

　　其實作完回過頭來想一想，不管是微信小程序圖片上傳仍是h5 js圖片上傳原理其實都是差很少，都是經過content-type 爲 multipart/form-data 標識，經過http post將圖片資源文件以二進制的編碼格式傳日後臺，而後後臺獲取對應文件流進行數據圖片保存。總結的不夠到位，有什麼沒作好的望各位大佬指點。

 

原文出處：https://www.cnblogs.com/Can-daydayup/p/10555399.html