首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序开发之多图片上传+服务端接收

微信小程序开发之多图片上传+服务端接收

作者头像
追逐时光者
发布于 2019-08-28 04:15:01
发布于 2019-08-28 04:15:01
2.3K00
代码可运行
举报
文章被收录于专栏:编程进阶实战编程进阶实战
运行总次数:0
代码可运行

前言:

  业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存。

使用技术:

  在这章中将会使用到微信小程序wx.uploadFile(Object object) 和wx.chooseImage(Object object)接口,对图片大小和来源进行上传

wx.chooseImage() 概述:

  从本地相册选择图片或使用相机拍照,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html?search-key=wx.chooseimage

参数
Object object

属性

类型

默认值

必填

说明

count

number

9

最多可以选择的图片张数

sizeType

Array.<string>

['original', 'compressed']

所选的图片的尺寸

sourceType

Array.<string>

['album', 'camera']

选择图片的来源

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

wx.uploadFile()概述:

  将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-typemultipart/form-data,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/miniprogram/dev/api/wx.uploadFile.html?q=wx.uploadFile)。

参数
Object object

属性

类型

默认值

必填

说明

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

接口调用结束的回调函数(调用成功、失败都会执行)

废话不多说,上代码:

.Wxml code:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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 code:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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.picurl;
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链接列表
})},
})

后端图片接收保存 code(.Net WEBAPI)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/// <summary>
/// 图片上传保存
/// </summary>
/// <returns></returns>
[HttpPost]
public IHttpActionResult Upload()
{
 try
{
var content = Request.Content;//获取http设置的消息和内容
var tempUploadFiles = "/Images/Wechatimages/";//保存路径
var newFileName = "";
string filePath = "";
string extname = "";
string returnurl = "";
var sp = new MultipartMemoryStreamProvider();
Task.Run(async () => await Request.Content.ReadAsMultipartAsync(sp)).Wait();

foreach (var item in sp.Contents)
{
if (item.Headers.ContentDisposition.FileName != null)
{
var filename = item.Headers.ContentDisposition.FileName.Replace("\"", "");
FileInfo file = new FileInfo(filename);
string fileTypes = "gif,jpg,jpeg,png,bmp";
if (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) == -1)
{
throw new ApplicationException("不支持上传文件类型");
}

//获取后缀
extname = System.IO.Path.GetExtension(filename);//获取文件的拓展名称
newFileName = Guid.NewGuid().ToString().Substring(0, 6) + extname;
string newFilePath = DateTime.Now.ToString("yyyy-MM-dd") + "/";
if (!Directory.Exists(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath))
{
Directory.CreateDirectory(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath);
}
filePath = Path.Combine(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath, newFileName);
 returnurl = Path.Combine(tempUploadFiles + newFilePath, newFileName);//图片相对路径
var ms = item.ReadAsStreamAsync().Result;
using (var br = new BinaryReader(ms))
{
var data = br.ReadBytes((int)ms.Length);
File.WriteAllBytes(filePath, data);//保存图片
}
}
}
return Json(new {code=1,picurl= returnurl,msg="success" }) ;
}
catch (Exception ex)
{
return Json(new { code =0,msg=ex.Message});
}
}

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

总结:

  其实做完回过头来想想,无论是微信小程序图片上传还是html页面图片上传原理其实都是差不多,都是通过content-type 为 multipart/form-data 标识,通过http post将图片资源文件以二进制的编码格式传往后台,然后后台获取对应文件流进行数据图片保存。总结的不够到位,有什么没做好的望各位大佬指点。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-03-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序上传wx.uploadFile - 小程序请假-请求
UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。
达达前端
2022/04/29
1.6K0
小程序上传wx.uploadFile - 小程序请假-请求
微信小程序开发(二)图片上传+服务端接收
这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的php,只能自己去改接收图片的接口。
开发者技术前线
2020/11/23
2.3K0
微信小程序开发(二)图片上传+服务端接收
实战|如何使用云开发实现照片附件上传开发
云开发是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用。
腾讯云开发TCB
2021/11/25
1.4K0
实战|如何使用云开发实现照片附件上传开发
微信小程序开发实战(22):上传文件和下载文件
使用wx.uploadFile方法可以向指定的Url上传文件。该方法只有一个Object类型的参数,Object类型参数属性的描述如下所示。
蒙娜丽宁
2020/08/24
3.2K0
微信小程序开发实战(22):上传文件和下载文件
【腾讯游戏人生】微信小程序开发总结
目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。
一时两无
2018/06/08
3.3K3
如何在小程序中实现文件上传下载
在如何实现小程序登录鉴权这篇文章中,我们实现了小程序的wx.request请求操作,除了request之外,小程序还有文件下载wx.downloadFile和文件上传wx.uploadFile请求接口。那么这两个请求如何使用呢?请看本篇文章。
六个六
2018/11/13
23.6K4
如何在小程序中实现文件上传下载
Django实战-小程序端图片上传
Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(表单)的使用。
小团子
2019/09/03
2.5K0
Django实战-小程序端图片上传
微信小程序上传图片和文件
要有遥不可及的梦想,也要有脚踏实地的本事。———– Grapefruit.Banuit Gang(香柚帮)
全栈程序员站长
2022/09/07
2.5K0
微信小程序-图片上传功能的实现
程序媛夏天
2024/01/18
6760
微信小程序-图片上传功能的实现
微信小程序上传图片
//添加图片 joinPicture: function (e) { var index = e.currentTarget.dataset.index; var evalList = this.data.evalList; var that = this; var imgNumber = evalList[index].tempFilePaths; if (imgNumber.length >= 3) { wx.showModal({
达达前端
2022/04/29
1.8K0
小程序-扩展能力图片上传Uploader组件
微信小程序中有一些扩展组件可以用,例如其中的图片上传组件,不论样式还是上传时的动画,都比较好,在使用过程中也遇到了一些问题,在这记录一下,也期望能让后来用的人少走弯路。
超级小可爱
2023/02/20
1.2K0
微信小程序云存储(文件上传到云端)
  我们直到,云开发控制台更多的是对项目中的初始文件的操作管理,例如项目的Logo图片可以通过云开发控制台提起上传到云端。项目在执行的过程中也会涉及文件的操作,例如用户上传图片的操作,这时就需要用到云开发存储API。
别团等shy哥发育
2023/02/25
7.2K0
微信小程序云存储(文件上传到云端)
微信小程序之图片选择、预览与上传
所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升。因此,在我们的移动应用中,可能经常会碰到这样的功能需求,需要为用户提供在相册中选择照片或者拍照片并上传的功能。
一斤代码
2018/08/21
6.5K1
微信小程序之图片选择、预览与上传
小程序的图片上传wx.uploadFile及后台PHP接收文件并存储到服务器[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/150010.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/05
2.4K0
微信小程序+SpringBoot实现文件上传与下载
  在application.yml(根据个人情况,有的人可能用的properties)配置文件中添加如下参数:
别团等shy哥发育
2023/02/25
2.9K0
微信小程序+SpringBoot实现文件上传与下载
微信小程序uploadfile服务器,微信小程序之wx.uploadFile[通俗易懂]
大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说微信小程序uploadfile服务器,微信小程序之wx.uploadFile[通俗易懂],希望能够帮助大家进步!!!
Java架构师必看
2022/07/06
6.8K0
微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载
也为其提供了视频和图片的二合一接口,这个接口不建议调用,图片和视频的上传建议区分开。
Kindear
2020/02/23
2.3K0
微信小程序实现图片上传限制数量和删除
<view class="col"> <view class="file" wx:for="{{fileList}}" wx:key="index"> <image mode="aspectFill" src="{{item}}" /> <view class="del" data-index="{{index}}" bindtap="delFile"> <image m
明知山
2020/09/03
3.8K2
谈谈小程序文件上传下载那些事~
上传下载功能在日常开发时是一个很常见的功能,我们在app或者网站开发时,我们可以直接选择从本地打开不同格式的文件,然后通过form-data格式将图片提交到服务端并实现从上传操作。本篇文章主要讲讲小程序如何实现不同格式文件的上传及下载。在小程序中我们没办法像网站开发一样,使用input直接一个标签可以选择本地不同格式的文件,在小程序中,要选择不同格式的文件需要调用不同的API。
Criss@陈磊
2019/12/05
2.5K0
谈谈小程序文件上传下载那些事~
微信小程序高级基础
微信小程序高级基础 微信小程序的注册和服务器配置: 小程序是什么呢?小程序是一种不需要下载安装就可以使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开应用,也体现了龙哥"用
达达前端
2019/07/04
1.4K0
推荐阅读
相关推荐
小程序上传wx.uploadFile - 小程序请假-请求
更多 >
交个朋友
加入云开发企业交流群
企业云开发实战交流 探讨技术架构优化
加入[后端] 腾讯云技术交流站
后端架构设计 高可用系统实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档