微信小程序实现图片上传功能
前端: 微信开发者工具
后端:.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:上传到服务器的临时文件夹内,当用户点击保存才把这些文件移动到正式目录下
微信小程序实现图片上传功能的更多相关文章
- [转]微信小程序实现图片上传功能
本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...
- nodeJs实现微信小程序的图片上传
今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...
- 微信小程序--实现图片上传
前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...
- 微信小程序中图片上传阿里云Oss
本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...
- 微信小程序实现图片上传,预览,删除
wxml: <view class='imgBox'> <image class='imgList' wx:for="{{imgs}}" wx:for-item= ...
- 微信小程序 实现图片上传并展示到前端(多文件)并实现表单提交验证
链接: https://blog.csdn.net/guanj0623/article/details/121595884?spm=1001.2014.3001.5501 https://blog.c ...
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
- 微信小程序多张图片上传
微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...
- 「小程序JAVA实战」小程序头像图片上传(上)(43)
转自:https://idig8.com/2018/09/08/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan40/ 在微信小程序中 ...
随机推荐
- hdu 4269 Defend Jian Ge
#include <cctype> #include <algorithm> #include <vector> #include <string> # ...
- HDU 4081 Peach Blossom Spring (最小生成树+dfs)
题意:给定一个 n 个点和相应的权值,要求你用 n-1 条边连接起来,其中一条边是魔法边,不用任何费用,其他的边是长度,求该魔法边的两端的权值与其他边费用的尽量大. 析:先求出最小生成树,然后再枚举每 ...
- 编写高质量代码改善C#程序的157个建议——建议38:小心闭包中的陷阱
建议38:小心闭包中的陷阱 先看一下下面的代码,设想一下输出的是什么? static void Main(string[] args) { List<Action> lists = new ...
- 编写高质量代码改善C#程序的157个建议——建议29:区别LINQ查询中的IEnumerable<T>和IQueryable<T>
建议29:区别LINQ查询中的IEnumerable<T>和IQueryable<T> LINQ查询一共提供了两类扩展方法,在System.Linq命名空间下,有两个静态类:E ...
- 编写高质量代码改善C#程序的157个建议——建议18:foreach不能代替for
建议18:foreach不能代替for 上一个建议中提到了foreach的两个优点:语法更简单,默认调用Dispose方法,所有我们强烈建议在实际的代码编写中更多的使用foreach.但是,该建议也有 ...
- vb.net 中 listview 中编辑 可以用 ComboBox 选择编辑数据
Public Class ModifyLineData Dim mousePos As Point Dim pubListviewitem As ListViewItem Dim imgList As ...
- DELPHI 调用系统 ADO 配置窗体 提高软件易用性
最近DELPHI好像不太景气哦,把自己的代码拿出来晒晒.高手别喷哦. 直接上代码 implementation uses AdoConEd; var saveconnstr:string; proc ...
- QuotedStr函数
今天学到一个新函数,很有用 QuotedStr(s);// 在s两边加单引号, 这样就不会看着n多的单引号糊涂了...
- delphi Post数据到网页
var http: TIdHttp; sendtoserver: TStringStream; str: string; begin http := TIdHttp.Create(); // 创建 h ...
- 认识学习MVC这家伙
通过最近的学习认识,只能感慨这玩意太强大了! 以前看了一些MVC的入门教程,看入门教程我感觉不能去体会它的强大,可以看看它的扩展点,通过扩展点去真正的试着了解它,体会它的强大. 它的验证.模型绑定提供 ...