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

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

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

前端：微信开发者工具

后端：.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],

http:// 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.http://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));

}

///

/// 上传文件 返回数据模型

///

public class UploadFileDTO

{

///

/// 目录名称

///

public string Catalog { set; get; }

///

/// 文件名称，包括扩展名

///

public string FileName { set; get; }

///

/// 浏览路径

///

public string Url { set; get; }

///

/// 上传的图片编号(提供给前端判断图片是否全部上传完)

///

public int ImgIndex { get; set; }

}

#region 获取配置文件Key对应Value值

///

/// 获取配置文件Key对应Value值

///

///

///

public static string GetConfigValue(string key)

{

return ConfigurationManager.AppSettings[key].ToString();

}

#endregion

设置配置文件上传文件对应的文件夹信息

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。