微信小程序实现图片上传功能
本文实例为大家分享了微信小程序实现图片上传功能的具体代码，供大家参考，具体内容如下
前端：微信开发者工具
后端：.Net
服务器：阿里云
这里介绍微信小程序如何实现上传图片到自己的服务器上
前端代码
data:{
productInfo:{}
},
//添加Banner
bindChooiceProduct:function(){
varthat=this;
wx.chooseImage({
count:3,//最多可以选择的图片总数
sizeType:['compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
vartempFilePaths=res.tempFilePaths;
//启动上传等待中...
wx.showToast({
title:'正在上传...',
icon:'loading',
mask:true,
duration:10000
})
varuploadImgCount=0;
for(vari=0,h=tempFilePaths.length;i
后端上传代码(将文件上传到服务器临时文件夹内)
[HttpPost]
publicContentResultUploadFileNew()
{
UploadFileDTOmodel=newUploadFileDTO();
HttpPostedFileBasefile=Request.Files["uploadfile_ant"];
if(file!=null)
{
//公司编号+上传日期文件主目录
model.Catalog=DateTime.Now.ToString("yyyyMMdd");
model.ImgIndex=Convert.ToInt32(Request.Form["imgIndex"]);
//获取文件后缀
stringextensionName=System.IO.Path.GetExtension(file.FileName);
//文件名
model.FileName=System.Guid.NewGuid().ToString("N")+extensionName;
//保存文件路径
stringfilePathName=System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"),model.Catalog);
if(!System.IO.Directory.Exists(filePathName))
{
System.IO.Directory.CreateDirectory(filePathName);
}
//相对路径
stringrelativeUrl=CommonHelper.GetConfigValue("ImageRelativeFolderTemp");
file.SaveAs(System.IO.Path.Combine(filePathName,model.FileName));
//获取临时文件相对完整路径
model.Url=System.IO.Path.Combine(relativeUrl,model.Catalog,model.FileName).Replace("\\","/");
}
returnContent(Newtonsoft.Json.JsonConvert.SerializeObject(model));
}
///
///上传文件返回数据模型
///
publicclassUploadFileDTO
{
///
///目录名称
///
publicstringCatalog{set;get;}
///
///文件名称，包括扩展名
///
publicstringFileName{set;get;}
///
///浏览路径
///
publicstringUrl{set;get;}
///
///上传的图片编号(提供给前端判断图片是否全部上传完)
///
publicintImgIndex{get;set;}
}
#region获取配置文件Key对应Value值
///
///获取配置文件Key对应Value值
///
///
///
设置配置文件上传文件对应的文件夹信息
PS：上传到服务器的临时文件夹内，当用户点击保存才把这些文件移动到正式目录下。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。