微信小程序实现图片上传功能-即速应用

前端：微信开发者工具

后端：.Net

服务器：阿里云

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

前端代码

data: {  productInfo: {}},//上传图片uploadImage: function () {  var that = this;  wx.chooseImage({    count: 1,  //最多可以选择的图片总数    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有    success: function (res) {      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片      var tempFilePaths = res.tempFilePaths;      //启动上传等待中...      wx.showToast({        title: '正在上传...',        icon: 'loading',        mask: true,        duration: 10000      })        wx.uploadFile({          url: '192.168.1.1/home/uploadfilenew',          filePath: tempFilePaths[0],          name: 'uploadfile_ant',          formData: {          },          header: {            "Content-Type": "multipart/form-data"          },          success: function (res) {            var data = JSON.parse(res.data);            //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }            console.log(data);          },          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");        //获取文件后缀        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:Imagestemp" />  <!--图片正式文件夹 绝对路径-->  <add key="ImageAbsoluteFolderFinal" value="D:Imagesproduct" />  <!--图片临时文件夹 相对路径-->  <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>  <!--图片正式文件夹 相对路径-->  <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/></appSettings>

PS：上传到服务器的临时文件夹内，当用户点击保存才把这些文件移动到正式目录下