微信小程序开发之多图片上传+.NET WebAPI后端服务保存图片资源

ops/2024/11/19 21:22:24/

前言:

  最近开发的一个小程序>微信小程序项目需要做一个同时选中三张(或者是多张)图片一起上传到服务端,服务端保存图片资源并保存的功能。发现在小程序>微信小程序开发中会有很多场景会使用到多图片上传并保存到的功能,所以我把自己总结的一些方法和完整示例写了下来希望能够帮到有需要的同学。

使用技术:

  在这章中将会使用到小程序>微信小程序wx.uploadFile(Object object) 和wx.chooseImage(Object object)接口,对图片大小和来源进行上传,后端则使用的.NET WebAPI来接收图片资源文件并保存。

wx.chooseImage() 概述:

  从本地相册选择图片或使用相机拍照,详细了解请阅读小程序>微信小程序开发文档(wx.chooseImage(Object object) | 微信开放文档)

参数:

属性类型默认值必填说明
countnumber9最多可以选择的图片张数
sizeTypeArray.<string>['original', 'compressed']所选的图片的尺寸
sourceTypeArray.<string>['album', 'camera']选择图片的来源
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

wx.uploadFile()概述:

  将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data,详细了解请阅读小程序>微信小程序开发文档(UploadTask | 微信开放文档)。

参数:

属性类型默认值必填说明
urlstring开发者服务器地址
filePathstring要上传文件资源的路径
namestring文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
headerObjectHTTP 请求 Header,Header 中不能设置 Referer
formDataObjectHTTP 请求中其他额外的 form data
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

废话不多说,上代码:

小程序页面代码:

<view class='form-s2'>
<view>门店照片(请选择三张)</view>
<view>
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{files}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}" style='margin-top:11px;'>
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
</view>
<view class="weui-uploader__input-box" style='top:11px;'>
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>

小程序Js代码:

Page({/*** 页面的初始数据*/
data:
{files: [], //门店图片信息,数组图片保存作为数据源
},
,/*** 多图片上传*/
chooseImage: function(e) {
var that = this;
if (that.data.files.length > 2) {resource.notishi("抱歉最多只允许上传三张图片哟~");return false;
}wx.chooseImage({
count: 3, //默认9张,这里设置三张
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
wx.showLoading({
title: '上传中,请稍等...',
})
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;//多图片上传,tempFilePaths本地图片地址为一个数组,遍历调用服务器图片上传接口即可实现多图保存
for (var i = 0; i < tempFilePaths.length; i++) {
console.log('图片地址名称' + tempFilePaths[i]);
wx.uploadFile({url: app.globalData.hostUrl + "/api/PictureUpload/Upload", //此处为实际接口地址
filePath: tempFilePaths[i], //获取图片路径
header: {
'content-type': 'multipart/form-data'
},name: 'upload',
success: function(res) {
wx.hideLoading();
let Result = JSON.parse(res.data);
console.log(Result);//接收返回来的服务器图片地址
if (Result.code == 1) {
let picurl = app.globalData.hostUrl + Result.picturePath;
console.log(picurl);that.setData({
files: that.data.files.concat(picurl)
});
} else {resource.notishi("网络异常,请稍后再试");
}
},
fail: function(res) {
wx.hideLoading()
wx.showToast({
title: '上传失败,请重新上传',
icon: 'none',
duration: 2000
})
},
})
}
}
})
},//图片预览
previewImage: function(e) {
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files // 需要预览的图片http链接列表
})},
})

.NET WebAPI接口服务接收图片资源并保存: 

后端使用MultipartMemoryStreamProvider来上传文件,详情如下所示:

using System;
using System.IO;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Hosting;
using System.Web.Http;namespace ShopSite.Controllers
{public class FileUploadController : ApiController{/// <summary>/// 图片上传保存/// </summary>/// <returns></returns>[HttpPost]public IHttpActionResult PictureUpload(){try{var picturePath = "";const string fileTypes = "gif,jpg,jpeg,png,bmp";//运行上传的图片文件格式var content = Request.Content;//获取或设置 HTTP 消息的内容(当需要获取HTTP信息是会使用到)const string tempUploadFiles = "/UploadFile/"; //保存路径var newFilePath = DateTime.Now.ToString("yyyy-MM-dd") + "/";var memoryStreamProvider = new MultipartMemoryStreamProvider();//获取图片文件流信息Task.Run(async () => await Request.Content.ReadAsMultipartAsync(memoryStreamProvider)).Wait();foreach (var item in memoryStreamProvider.Contents){if (item.Headers.ContentDisposition.FileName == null) continue;var filename = item.Headers.ContentDisposition.FileName.Replace("\"", "");var file = new FileInfo(filename);//upload fail(判断是否是运行上传的图片格式)if (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) == -1){return Json(new { code =0,picturePath ="", msg = "不支持上传文件类型" });}//获取后缀var extension = Path.GetExtension(filename);var newFileName = Guid.NewGuid().ToString()+extension;//重命名if (!Directory.Exists(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath)){Directory.CreateDirectory(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath);}var filePath = Path.Combine(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath, newFileName);picturePath=Path.Combine(tempUploadFiles + newFilePath, newFileName);//图片相对路径var result = item.ReadAsStreamAsync().Result;using (var br = new BinaryReader(result)){var data = br.ReadBytes((int)result.Length);File.WriteAllBytes(filePath, data);//保存图片}}//save successfullyreturn Json(new { code = 1, picturePath = picturePath,msg = "图片上传成功~" });}catch (Exception ex){return Json(new { code =0, msg = ex.Message });}}}
}

效果图展示(美女哟,嘻嘻):


http://www.ppmy.cn/ops/17252.html

相关文章

软考 系统架构设计师系列知识点之大数据设计理论与实践(13)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之大数据设计理论与实践&#xff08;12&#xff09; 所属章节&#xff1a; 第19章. 大数据架构设计理论与实践 第4节 Kappa架构 19.4.2 Kappa架构介绍 Kappa架构由Jay Kreps提出&#xff08;Lambda由Storm之父Nayhan M…

ARM之栈与方法

ARM之栈与方法 计算机中的栈是一种线性表&#xff0c;它被限定只能在一端进行插入和删除操作&#xff08;先进后出&#xff09;。通常将可以插入和删除操作的一端称为栈顶&#xff0c;相对的一端为栈底。 通常栈有递增堆栈&#xff08;向高地址方向生长&#xff09;、递减堆栈…

水电气能耗管理云平台

安科瑞薛瑶瑶18701709087/17343930412 能耗管理云平台采用泛在物联、云计算、大数据、移动通讯、智能传感器等技术手段可为用户提供能源数据采集、统计分析、能效分析、用能预警、设备管理等服务&#xff0c;平台可以广泛应用于多种领域。

Java后台开发的前置说明

1.知识点逻辑 一个部分 都是先挑重点知识点讲解 然后根据这些重点知识点去完成一个项目的开发 然后在到返回来解决这个部分其他细枝末节的知识点 2.软件开发的分工 我们大致可以将软件开发分成四块&#xff1a; 1.前端开发(比如开发电脑中的京东 htmlcssjavascript) 2.移动开…

Spring Boot中的SSE与缓存集成:使用Redis加速事件推送

Spring Boot中的SSE与缓存集成&#xff1a;使用Redis加速事件推送 实时事件推送在现代Web应用中变得越来越重要&#xff0c;而Spring Server-Sent Events&#xff08;SSE&#xff09;为实现实时推送提供了一种简单而有效的方式。然而&#xff0c;随着应用规模的增长&#xff0c…

安卓和ios设置自己的短链

ios 的info.plist文件 设置 CFBundleURLSchemes 其中konnect 就是设置app的短链名称 <array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>org.konnect.app</str…

快来看看,华为手环9有哪些变化

听说华为手环出新款了&#xff0c;这次是华为手环9。那么&#xff0c;这款新品手环到底有哪些值得关注的变化呢&#xff1f; 在外观设计上&#xff0c;华为手环9真的让我眼前一亮。它的视觉效果更加立体和时尚&#xff0c;在颜色选择上也提供了更多的多样性&#xff0c;推…

DaVinci Fusion Studio 19 for Mac/win:影视后期特效合成的巅峰之作

在影视后期制作的广袤天地里&#xff0c;一款强大的特效合成软件如同一位技艺高超的魔法师&#xff0c;能够化腐朽为神奇&#xff0c;将普通的影像素材转变为震撼人心的视觉盛宴。而DaVinci Fusion Studio 19&#xff0c;正是这样一款备受影视从业者推崇的巅峰之作。 无论是Ma…