加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 20:08:08 所属栏目:资源 来源:网络整理
导读:本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下 前端:微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 wx.chooseImage({ count: 3,//最多可以选择的图片总

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

前端:微信开发者工具

后端:.Net

服务器:阿里云

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

前端代码

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) { } 
  }) 
 } 
}); 

}
}
});
}

后端上传代码(将文件上传到服务器临时文件夹内)

//获取文件后缀 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; } }
/// 获取配置文件Key对应Value值 /// /// /// public static string GetConfigValue(string key) { return ConfigurationManager.AppSettings[key].ToString(); } #endregion

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

<add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/&gt;

<add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/&gt;

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读