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

前端代碼

 

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) { }
            })
          }
        });
      }
    }
  });
}

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

 

 

[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));
}

/// <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; }
}

#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

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

 

 

<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：上傳到服務器的臨時文件夾