[轉]微信小程序實現圖片上傳功能

時間  2019-11-11
標籤 微信 程序 實現 圖片 上傳 功能 简体版
原文   原文鏈接

本文轉自：http://blog.csdn.net/feter1992/article/details/77877659javascript

前端： 微信開發者工具html

後端：.Net前端

服務器：阿里雲java

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

前端代碼後端

 

[javascript] view plain copy print?
  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. }  
data: {
  productInfo: {}
},
//添加Banner
bindChooiceProduct: function () {
  var that = this;

  wx.chooseImage({
    count: 3,  //最多能夠選擇的圖片總數
    sizeType: ['compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
    sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
    success: function (res) {
      // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
      var tempFilePaths = res.tempFilePaths;
      //啓動上傳等待中...
      wx.showToast({
        title: '正在上傳...',
        icon: 'loading',
        mask: true,
        duration: 10000
      })
      var uploadImgCount = 0;
      for (var i = 0, h = tempFilePaths.length; i < h; i++) {
        wx.uploadFile({
          url: util.getClientSetting().domainName + '/home/uploadfilenew',
          filePath: tempFilePaths[i],
          name: 'uploadfile_ant',
          formData: {
            'imgIndex': i
          },
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: function (res) {
            uploadImgCount++;
            var data = JSON.parse(res.data);
            //服務器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
            var productInfo = that.data.productInfo;
            if (productInfo.bannerInfo == null) {
              productInfo.bannerInfo = [];
            }
            productInfo.bannerInfo.push({
              "catalog": data.Catalog,
              "fileName": data.FileName,
              "url": data.Url
            });
            that.setData({
              productInfo: productInfo
            });

            //若是是最後一張,則隱藏等待中
            if (uploadImgCount == tempFilePaths.length) {
              wx.hideToast();
            }
          },
          fail: function (res) {
            wx.hideToast();
            wx.showModal({
              title: '錯誤提示',
              content: '上傳圖片失敗',
              showCancel: false,
              success: function (res) { }
            })
          }
        });
      }
    }
  });
}

後端上傳代碼(將文件上傳到服務器臨時文件夾內)微信小程序

 

 

[csharp] view plain copy print?
  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. }  
[HttpPost]
public ContentResult UploadFileNew()
{
    UploadFileDTO model = new UploadFileDTO();
    HttpPostedFileBase file = Request.Files["uploadfile_ant"];
    if (file != null)
    {
        //公司編號+上傳日期文件主目錄
        model.Catalog = DateTime.Now.ToString("yyyyMMdd");
        model.ImgIndex = Convert.ToInt32(Request.Form["imgIndex"]);

        //獲取文件後綴
        string extensionName = System.IO.Path.GetExtension(file.FileName);

        //文件名
        model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;

        //保存文件路徑
        string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog);
        if (!System.IO.Directory.Exists(filePathName))
        {
            System.IO.Directory.CreateDirectory(filePathName);
        }
        //相對路徑
        string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp");
        file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));

        //獲取臨時文件相對完整路徑
        model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");
    }
    return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));
}
[csharp] view plain copy print?
  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. }  
/// <summary>
/// 上傳文件 返回數據模型
/// </summary>
public class UploadFileDTO
{
    /// <summary>
    /// 目錄名稱
    /// </summary>
    public string Catalog { set; get; }
    /// <summary>
    /// 文件名稱，包括擴展名
    /// </summary>
    public string FileName { set; get; }
    /// <summary>
    /// 瀏覽路徑
    /// </summary>
    public string Url { set; get; }
    /// <summary>
    /// 上傳的圖片編號(提供給前端判斷圖片是否所有上傳完)
    /// </summary>
    public int ImgIndex { get; set; }
}
[csharp] view plain copy print?
  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  
#region 獲取配置文件Key對應Value值
/// <summary>
/// 獲取配置文件Key對應Value值
/// </summary>
/// <param name="key"></param>
/// <returns></returns>
public static string GetConfigValue(string key)
{
    return ConfigurationManager.AppSettings[key].ToString();
}
#endregion

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

 

 

[html] view plain copy print?
  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>  
<appSettings>
  <!--圖片臨時文件夾 絕對路徑-->
  <add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" />
  <!--圖片正式文件夾 絕對路徑-->
  <add key="ImageAbsoluteFolderFinal" value="D:\Images\product" />

  <!--圖片臨時文件夾 相對路徑-->
  <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>
  <!--圖片正式文件夾 相對路徑-->
  <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/>
</appSettings>

PS：上傳到服務器的臨時文件夾內，當用戶點擊保存才把這些文件移動到正式目錄下微信

 

歡迎加入個人微信小程序技術交流羣微信開發

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程