微信小程序--實現圖片上傳

前端： 微信開發者工具

後端：.Net

服務器：阿里雲

這裏介紹微信小程序如何實現上傳圖片到本身的服務器上

前端代碼

 1 data: {
 2   productInfo: {}
 3 },
 4 //添加Banner
 5 bindChooiceProduct: function () {
 6   var that = this;
 7 
 8   wx.chooseImage({
 9     count: 3,  //最多能夠選擇的圖片總數
10     sizeType: ['compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
11     sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
12     success: function (res) {
13       // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
14       var tempFilePaths = res.tempFilePaths;
15       //啓動上傳等待中...
16       wx.showToast({
17         title: '正在上傳...',
18         icon: 'loading',
19         mask: true,
20         duration: 10000
21       })
22       var uploadImgCount = 0;
23       for (var i = 0, h = tempFilePaths.length; i < h; i++) {
24         wx.uploadFile({
25           url: util.getClientSetting().domainName + '/home/uploadfilenew',
26           filePath: tempFilePaths[i],
27           name: 'uploadfile_ant',
28           formData: {
29             'imgIndex': i
30           },
31           header: {
32             "Content-Type": "multipart/form-data"
33           },
34           success: function (res) {
35             uploadImgCount++;
36             var data = JSON.parse(res.data);
37             //服務器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
38             var productInfo = that.data.productInfo;
39             if (productInfo.bannerInfo == null) {
40               productInfo.bannerInfo = [];
41             }
42             productInfo.bannerInfo.push({
43               "catalog": data.Catalog,
44               "fileName": data.FileName,
45               "url": data.Url
46             });
47             that.setData({
48               productInfo: productInfo
49             });
50 
51             //若是是最後一張,則隱藏等待中
52             if (uploadImgCount == tempFilePaths.length) {
53               wx.hideToast();
54             }
55           },
56           fail: function (res) {
57             wx.hideToast();
58             wx.showModal({
59               title: '錯誤提示',
60               content: '上傳圖片失敗',
61               showCancel: false,
62               success: function (res) { }
63             })
64           }
65         });
66       }
67     }
68   });
69 }

後端上傳代碼(將文件上傳到服務器臨時文件夾內)

 1 [HttpPost]
 2 public ContentResult UploadFileNew()
 3 {
 4     UploadFileDTO model = new UploadFileDTO();
 5     HttpPostedFileBase file = Request.Files["uploadfile_ant"];
 6     if (file != null)
 7     {
 8         //公司編號+上傳日期文件主目錄
 9         model.Catalog = DateTime.Now.ToString("yyyyMMdd");
10         model.ImgIndex = Convert.ToInt32(Request.Form["imgIndex"]);
11 
12         //獲取文件後綴
13         string extensionName = System.IO.Path.GetExtension(file.FileName);
14 
15         //文件名
16         model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;
17 
18         //保存文件路徑
19         string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog);
20         if (!System.IO.Directory.Exists(filePathName))
21         {
22             System.IO.Directory.CreateDirectory(filePathName);
23         }
24         //相對路徑
25         string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp");
26         file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));
27 
28         //獲取臨時文件相對完整路徑
29         model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");
30     }
31     return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));
32 }

 1 /// <summary>
 2 /// 上傳文件 返回數據模型
 3 /// </summary>
 4 public class UploadFileDTO
 5 {
 6     /// <summary>
 7     /// 目錄名稱
 8     /// </summary>
 9     public string Catalog { set; get; }
10     /// <summary>
11     /// 文件名稱，包括擴展名
12     /// </summary>
13     public string FileName { set; get; }
14     /// <summary>
15     /// 瀏覽路徑
16     /// </summary>
17     public string Url { set; get; }
18     /// <summary>
19     /// 上傳的圖片編號(提供給前端判斷圖片是否所有上傳完)
20     /// </summary>
21     public int ImgIndex { get; set; }
22 }

 1 #region 獲取配置文件Key對應Value值
 2 /// <summary>
 3 /// 獲取配置文件Key對應Value值
 4 /// </summary>
 5 /// <param name="key"></param>
 6 /// <returns></returns>
 7 public static string GetConfigValue(string key)
 8 {
 9     return ConfigurationManager.AppSettings[key].ToString();
10 }
11 #endregion

設置配置文件上傳文件對應的文件夾信息

 1 <appSettings>
 2   <!--圖片臨時文件夾 絕對路徑-->
 3   <add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" />
 4   <!--圖片正式文件夾 絕對路徑-->
 5   <add key="ImageAbsoluteFolderFinal" value="D:\Images\product" />
 6 
 7   <!--圖片臨時文件夾 相對路徑-->
 8   <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>
 9   <!--圖片正式文件夾 相對路徑-->
10   <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/>
11 </appSettings>