微信小程序实现图片上传功能
作者:行侠者 发布时间:2023-09-06 13:08:44
标签:微信小程序,上传
本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下
前端:微信开发者工具
后端:.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:上传到服务器的临时文件夹内,当用户点击保存才把这些文件移动到正式目录下。
来源:https://blog.csdn.net/feter1992/article/details/77877659
0
投稿
猜你喜欢
- 尽管很多 NoSQL 数据库近几年大放异彩,但是像 MySQL 这样的关系型数据库依然是互联网的主流数据库之一,每个学 Python 的都有
- use mysql; u
- 用户界面和用户体验(UI/UX)是任何产品成败的关键,尤其 Web,Web 是一种公开的,可以被任何人随时随地访问的特殊产品,用户的体验几乎
- 一直以来,Web 字体背着单调的恶名,因为想在网页上显示一种字体,该字体文件本身必须存在于用户的电脑中,由于这个限制,加上 Web 用户可能
- PyType_Type和PyBaseObject_TypePyObject和PyTypeObject内容的最后指出下图中对实例对象和类型对象
- 知识点: Array方法: sort:降序 reverse:反序 效果: 代码: <style> *{ margin
- 这是Smashing Magazine花费几个月的时间研究编写的2009 年Web设计风格与潮流,Smashing Magazine 的编辑
- 1、仅 Safari 和 Opera 识别的 Hack@media all and (min-width:&n
- Linux/Unix的系统上,一般默认的 python 版本为 2.x,我们可以将 python3.x 安装在 /usr/local/pyt
- 本文实例为大家分享了Go实现文件上传和下载的具体代码,供大家参考,具体内容如下一.文件上传文件上传:客户端把上传文件转换为二进制流后发送给服
- 从我们论坛中收集了这段HTML制作页面需要最大化、最小化时可以借鉴参考。最大化效果:<OBJECT id="max
- phpMyAdmin 是一套可以通过WEB来管理 MySQL-server 以及单一数据库的 PHP
- 如何通过表单创建一个Word?举个例子吧,我们先创建一个表单文件docform.htm,再用ASP程序(doccreate.asp)来处理表
- 在使用javascript编程时浏览器中经常会遇到的两个麻烦,下面提供两个函数解决方式做参考,并提供一个demo让你更直观地了解我所说的这两
- SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数; SQL> select ascii('A')
- 引子任务调度(Task Scheduling)是很多软件系统中的重要组成部分,字面上的意思是按照一定要求分配运行一些通常时间较长的脚本或程序
- 在使用操作XML文件时,我们可以使用Load方法直接加载xml文件即可,在ie和ff下通用。但是是XML字符串,则在两种浏览器下就会有所不同
- 回滚段管理一直是ORACLE数据库管理的一个难题,本文通过实例介绍ORACLE回滚段的概念,用法和规划及问题的解决。 回滚段概述 回滚段用于
- 使用xmlhttp中的getResponseHeader 从响应信息中获取指定的http头strValue = oXML
- 利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表