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

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

前端：微信开发者工具

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

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