微信小程序实现图片上传功能
本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下 前端:微信开发者工具 后端:.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 });
} 后端上传代码(将文件上传到服务器临时文件夹内) //获取文件后缀
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("","/");
}
/// 上传文件 返回数据模型
///
public class UploadFileDTO
{
///
/// 获取配置文件Key对应Value值
///
///
///
设置配置文件上传文件对应的文件夹信息 <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/> <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/> PS:上传到服务器的临时文件夹内,当用户点击保存才把这些文件移动到正式目录下。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |