微信小程序开发之多图片上传+服务端接收
前言:
最近开发的一个微信小程序项目需要做一个同时选中三张(或者是多张)图片一起上传到服务端,服务端保存图片资源并保存的功能。发现在微信小程序开发中会有很多场景会使用到多图片上传并保存到的功能,所以我把自己总结的一些方法和完整示例写了下来希望能够帮到有需要的同学。
使用技术:
在这章中将会使用到微信小程序wx.uploadFile(Object object) 和wx.chooseImage(Object object)接口,对图片大小和来源进行上传,后端则使用的.NET WebAPI来接收图片资源文件并保存。
wx.chooseImage() 概述:
从本地相册选择图片或使用相机拍照,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html?search-key=wx.chooseimage)
参数:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
count | number | 9 | 否 | 最多可以选择的图片张数 |
sizeType | Array.<string> | ['original', 'compressed'] | 否 | 所选的图片的尺寸 |
sourceType | Array.<string> | ['album', 'camera'] | 否 | 选择图片的来源 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.uploadFile()概述:
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type
为 multipart/form-data,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/miniprogram/dev/api/wx.uploadFile.html?q=wx.uploadFile)。
参数:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 开发者服务器地址 | |
filePath | string | 是 | 要上传文件资源的路径 | |
name | string | 是 | 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 | |
header | Object | 否 | HTTP 请求 Header,Header 中不能设置 Referer | |
formData | Object | 否 | HTTP 请求中其他额外的 form data | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
废话不多说,上代码:
小程序页面代码:
<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 > ) {
resource.notishi("抱歉最多只允许上传三张图片哟~");
return false;
} wx.chooseImage({
count: , //默认9张,这里设置三张
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
wx.showLoading({
title: '上传中,请稍等...',
})
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
//多图片上传,tempFilePaths本地图片地址为一个数组,遍历调用服务器图片上传接口即可实现多图保存
for (var i = ; 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 == ) {
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:
})
},
})
}
}
})
},
//图片预览
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().ToLower()) == -)
{
return Json(new { code =,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 successfully
return Json(new { code = , picturePath = picturePath,msg = "图片上传成功~" });
}
catch (Exception ex)
{
return Json(new { code =, msg = ex.Message });
}
}
}
}
效果图展示(美女哟,嘻嘻):
总结:
其实做完回过头来想想,无论是微信小程序图片上传还是h5 js图片上传原理其实都是差不多,都是通过content-type 为 multipart/form-data 标识,通过http post将图片资源文件以二进制的编码格式传往后台,然后后台获取对应文件流进行数据图片保存。总结的不够到位,有什么没做好的望各位大佬指点。
微信小程序开发之多图片上传+服务端接收的更多相关文章
- [转]微信小程序开发(二)图片上传+服务端接收
本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...
- TCP客户端图片上传服务端保存本地示例
//TCP客户端public class TCPClient { public static void main(String[] args)throws IOException { Socket s ...
- 微信小程序---图片上传+服务端接受
原文地址:http://blog.csdn.net/sk719887916/article/details/54312573 微信小程序,图片上传,应用地方-修改用户信息的头像. 详细代码: 小程序的 ...
- 微信小程序开发:背景图片设置
本文链接:https://blog.csdn.net/michael_f2008/article/details/86543134开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错: ...
- 微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
- 微信小程序 springboot nginx 做图片存储 上传 浏览
微信小程序前端-springboot后端-nginx图片存储 前言 本人小白一名,这是第一次学习微信小程序,特此做个记录. 首先准备nginx做图片存储 选择一个地址存放图片 #我的地址 [root@ ...
- 微信小程序选择视频,视频上传,视频播放
请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...
- 微信小程序开发——base64位图片显示问题
前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...
- 微信小程序开发——设置默认图片、错误加载图片
小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...
随机推荐
- Scrapy 1.4 文档 04 例子
最好的学习方法是举例说明,Scrapy也不例外. 因此,我们有一个名为 quotesbot 的 Scrapy 项目,您可以通过它来学习更多关于 Scrapy 的知识. 它包含两个用于http://qu ...
- 阿里云和腾讯云免费SSL证书 专题
阿里云部署SSL证书 http://www.cnblogs.com/sslwork/p/5984167.html 查找中间证书 为了确保兼容到所有浏览器,我们必须在阿里云上部署中间证书,如果不部署证书 ...
- Spring-cloud (八) Hystrix 请求缓存的使用
前言: 最近忙着微服务项目的开发,脱更了半个月多,今天项目的初版已经完成,所以打算继续我们的微服务学习,由于Hystrix这一块东西好多,只好多拆分几篇文章写,对于一般对性能要求不是很高的项目中,可以 ...
- SVN更新失败,提示locked 怎么破
有时在svn更新或提交代码时,会报错,让你cleanup 如果cleanup解决不了,就要删除被锁定的文件夹下的文件,然后就可以更新或提交了 怎么做呢? 1.首先在CMD中进入你工作目录被锁定的文件 ...
- Windows10 使用docker toolbox安装docker
一.介绍 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间 ...
- redis基础操作~~数据备份与恢复、数据安全、性能测试、客户端连接、分区
数据备份与恢复 数据备份redis save 命令用于创建当前数据库的备份. redis 127.0.0.1:6379> SAVE OK 该命令将在 redis 安装目录中创建dump.rdb文 ...
- 利用pytesser识别图形验证码
简单识别 1.一般思路 验证码识别的一般思路为: 图片降噪 图片切割 图像文本输出 1.1 图片降噪 所谓降噪就是把不需要的信息通通去除,比如背景,干扰线,干扰像素等等,只剩下需要识别的文字,让图片变 ...
- apigateway-kong(一)简介及部署
时隔三年,本人重出江湖,哈哈哈 浏览之前写的博客,有些深度还不是太够.篇幅太短,并且很多专题没有坚持写下去,部分技(dai)术(ma)没有从业务中抽离出来,本人感觉好遗憾--为此,痛下决心,重拾博客, ...
- BZOJ_1132_[POI2008]Tro_计算几何
BZOJ_1132_[POI2008]Tro_计算几何 Description 平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 Input 第一行给出数字N,N在[3 ...
- BZOJ4554: [Tjoi2016&Heoi2016]游戏 luoguP2825 loj2057
题面描述:尽可能多的放置符合要求的炸弹. 分析: 在i,j处放置炸弹,则在第i行,上一个硬石头之后,下一个硬石头之前,第j列,上一个硬石头之后,下一个硬石头之前,不能再次放置炸弹. 首先,这个题,一看 ...