微信小程序实现图片上传功能

本文实例为大家分享了微信小程序实现图片上传功能的具体代码，供大家参考，具体内容如下

前端：微信开发者工具

后端：.Net

服务器：阿里云

这里介绍微信小程序如何实现上传图片到自己的服务器上

前端代码

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：上传到服务器的临时文件夹内，当用户点击保存才把这些文件移动到正式目录下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。