本文实例为大家分享了微信小程序实现图片上传功能的具体代码，供大家参考，具体内容如下
前端：微信开发者工具
后端：.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],
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) { }
})
}
});
}
}
});
}
后端上传代码(将文件上传到服务器临时文件夹内)
[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));
}
/// <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:\images\temp" /> <!--图片正式文件夹 绝对路径--> <add key="imageabsolutefolderfinal" value="d:\images\product" /> <!--图片临时文件夹 相对路径--> <add key="imagerelativefoldertemp" value="http://192.168.1.79:9009/temp"/> <!--图片正式文件夹 相对路径--> <add key="imagerelativefolderfinal" value="http://192.168.1.79:9009/product"/> </appsettings>
ps：上传到服务器的临时文件夹内，当用户点击保存才把这些文件移动到正式目录下。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论