小程序上传多图片多附件多视频 c#后端
前言:
最近在研究微信小程序,本人自己是C#写后端的;感觉小程序挺好玩的,就自己研究了一下;刚好今天又给我需求,通过小程序上传多图 然后C#后端保存到服务器;
用NET明白 前端上传需要用到流,然后就接收 保存;
小程序端的比较完整,能上传图片 删除图片 查看图片,文件或者视频也可以;
进入主题;
效果图:
c#后端:
/// <summary>
/// 上传图片
/// </summary>
/// <returns></returns>
[HttpPost]
public ResultData UploadFileNew()
{
ResultData result = new ResultData();
string parameters = "";
string operating = "图片上传"; try
{
string path = "/tmp/";
HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["content"]; //对应小程序 name
parameters = string.Format("postData:{0}", file.ToString());
LogHelper.Info("file文件:" + file.ToString(), , "miapp", module, operating);
//获取文件
if (file != null)
{
Stream sr = file.InputStream; //文件流
Bitmap bitmap = (Bitmap)Bitmap.FromStream(sr);
path += file.FileName;
string currentpath = System.Web.HttpContext.Current.Server.MapPath("~"); bitmap.Save(currentpath + path);
}
result.status = ;
result.data = path;
}
catch (Exception ex)
{ result.status = -;
result.detail = ex.Message;
return result; } return result; }
小程序前端:
upFiles.js
var chooseImage = (t, count) =>{
wx.chooseImage({
count: count,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
var imgArr = t.data.upImgArr || [];
let arr = res.tempFiles;
// console.log(res)
arr.map(function(v,i){
v['progress'] = 0;
imgArr.push(v)
})
t.setData({
upImgArr: imgArr
}) let upFilesArr = getPathArr(t);
if (upFilesArr.length > count-1) {
let imgArr = t.data.upImgArr;
let newimgArr = imgArr.slice(0, count)
t.setData({
upFilesBtn: false,
upImgArr: newimgArr
})
}
},
});
}
var chooseVideo = (t,count) => {
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 30,
compressed:true,
camera: 'back',
success: function (res) {
let videoArr = t.data.upVideoArr || [];
let videoInfo = {};
videoInfo['tempFilePath'] = res.tempFilePath;
videoInfo['size'] = res.size;
videoInfo['height'] = res.height;
videoInfo['width'] = res.width;
videoInfo['thumbTempFilePath'] = res.thumbTempFilePath;
videoInfo['progress'] = 0;
videoArr.push(videoInfo)
t.setData({
upVideoArr: videoArr
})
let upFilesArr = getPathArr(t);
if (upFilesArr.length > count - 1) {
t.setData({
upFilesBtn: false,
})
}
// console.log(res)
}
})
} // 获取 图片数组 和 视频数组 以及合并数组
var getPathArr = t => {
let imgarr = t.data.upImgArr || [];
let upVideoArr = t.data.upVideoArr || [];
let imgPathArr = [];
let videoPathArr = [];
imgarr.map(function (v, i) {
imgPathArr.push(v.path)
})
upVideoArr.map(function (v, i) {
videoPathArr.push(v.tempFilePath)
})
let filesPathsArr = imgPathArr.concat(videoPathArr);
return filesPathsArr;
} /**
* upFilesFun(this,object)
* object:{
* url ************ 上传路径 (必传)
* filesPathsArr ****** 文件路径数组
* name ****** wx.uploadFile name
* formData ****** 其他上传的参数
* startIndex ****** 开始上传位置 0
* successNumber ****** 成功个数
* failNumber ****** 失败个数
* completeNumber ****** 完成个数
* }
* progress:上传进度
* success:上传完成之后
*/ var upFilesFun = (t, data, progress, success) =>{
let _this = t;
let url = data.url;
let filesPath = data.filesPathsArr ? data.filesPathsArr : getPathArr(t);
let name = data.name || 'file';
let formData = data.formData || {};
let startIndex = data.startIndex ? data.startIndex : 0;
let successNumber = data.successNumber ? data.successNumber : 0;
let failNumber = data.failNumber ? data.failNumber : 0;
if (filesPath.length == 0) {
success([]);
return;
}
const uploadTask = wx.uploadFile({
url: url,
filePath: filesPath[startIndex],
name: name,
formData: formData,
success: function (res) {
var data = res.data
successNumber++;
// console.log('success', successNumber)
// console.log('success',res)
// 把后台返回的地址链接存到一个数组
let uploaded = t.data.uploadedPathArr || [];
var da = JSON.parse(res.data);
// console.log(da)
if (da.code == 1001) {
// ### 此处可能需要修改 以获取图片路径
uploaded.push(da.data) t.setData({
uploadedPathArr: uploaded
})
}
},
fail: function(res){
failNumber++;
// console.log('fail', filesPath[startIndex])
// console.log('failstartIndex',startIndex)
// console.log('fail', failNumber)
// console.log('fail', res)
},
complete: function(res){ if (startIndex == filesPath.length - 1 ){
// console.log('completeNumber', startIndex)
// console.log('over',res)
let sucPathArr = t.data.uploadedPathArr;
success(sucPathArr);
t.setData({
uploadedPathArr: []
})
console.log('成功:' + successNumber + " 失败:" + failNumber)
}else{
startIndex++;
// console.log(startIndex)
data.startIndex = startIndex;
data.successNumber = successNumber;
data.failNumber = failNumber;
upFilesFun(t, data, progress, success);
}
}
}) uploadTask.onProgressUpdate((res) => {
res['index'] = startIndex;
// console.log(typeof (progress));
if (typeof (progress) == 'function') {
progress(res);
}
// console.log('上传进度', res.progress)
// console.log('已经上传的数据长度', res.totalBytesSent)
// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
}) }
module.exports = { chooseImage, chooseVideo, upFilesFun, getPathArr}
//以下代码 去除上传附件;具体可以参考demo
// 上传文件
subFormData:function(){
let _this = this;
let upData = {};
let upImgArr = _this.data.upImgArr;
let upVideoArr = _this.data.upVideoArr;
_this.setData({
upFilesProgress:true,
})
upData['url'] = config.service.upFiles;
upFiles.upFilesFun(_this, upData,function(res){
if (res.index < upImgArr.length){
upImgArr[res.index]['progress'] = res.progress _this.setData({
upImgArr: upImgArr,
})
}else{
let i = res.index - upImgArr.length;
upVideoArr[i]['progress'] = res.progress
_this.setData({
upVideoArr: upVideoArr,
})
}
// console.log(res)
}, function (arr) {
// success
console.log(arr)
})
}
})
总结:参考小程序官方文档 小程序上传图片跟附件demo.zip
小程序用的是插件:可以上传图片跟附件包括视频;
研究基于半天 ,也坑了半天,重点要心细!
下载demo直接使用 ,欢迎交流学习!
小程序上传多图片多附件多视频 c#后端的更多相关文章
- 微信小程序上传单张或多张图片
-- chooseImage: function () { let that = this; let worksImgs = that.data.worksImgs; let len = that.d ...
- 微信小程序上传多张图片,及php后台处理
微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...
- 小程序上传wx.uploadFile - 小程序请假-请求
小程序上传wx.uploadFile UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器.客户端发起一个 HTTPS POST 请求,其中 cont ...
- 小程序上传wx.uploadFile - 小程序请假
小程序上传wx.uploadFile UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器.客户端发起一个 HTTPS POST 请求,其中 cont ...
- 微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
- wepy开发小程序 大坑....本地调试ok,小程序上传体验版 组件出现问题
如果你碰到的上述问题(本地调试ok,小程序上传体验版 各种莫名其妙的问题-卡死-组件属性失效-$apply()不起作用) 您需要关闭 微信开发者工具中: 1.微信开发者工具-->项目--> ...
- 微信小程序 上传图的功能
首先选择图片,然后循环,再就是在点击发布的时候循环图片地址赋值,包括删除命令 js代码: //选择图片 uploadImgAdd: function(e) { var imgs = this.data ...
- 微信小程序上传Word文档、PDF、图片等文件
<view class="main" style="border:none"> <view class="title"&g ...
- 小程序上传base64的图片,可上传多张
微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...
随机推荐
- 好用的一个object c 宏
好用的一个object c 宏 from https://github.com/justzt/ios-helper/blob/master/Macro.h // // Macro.h // Photo ...
- java图形用户界面练习。j2se
总结:主要是如何布局.还是存在很大问题 package clientFrame; import java.awt.FlowLayout; import javax.swing.JButton; imp ...
- PTA 是否同一棵二叉搜索树(25 分)
是否同一棵二叉搜索树(25 分) 给定一个插入序列就可以唯一确定一棵二叉搜索树.然而,一棵给定的二叉搜索树却可以由多种不同的插入序列得到.例如分别按照序列{2, 1, 3}和{2, 3, 1}插入初始 ...
- Java-Maven-Runoob:Maven Web 应用
ylbtech-Java-Maven-Runoob:Maven Web 应用 1.返回顶部 1. Maven Web 应用 本章节我们将学习如何使用版本控制系统 Maven 来管理一个基于 web 的 ...
- 转:oracle几组重要的常见视图-v$latch,v$latch_children,v$lock,v$locked_object
v$latch Oracle Rdbms应用了各种不同类型的锁定机制,latch即是其中的一种.Latch是用于保护SGA区中共享数据结构的一种串行化锁定机制.Latch的实现是与操作系统相关的, 尤 ...
- 张瀚荣:如何用UE4制作3D动作游戏
转自:http://www.gamelook.com.cn/2015/06/218267 GameLook报道/ 6月5日,2015年第三期GameLook开放日‧虚幻引擎专场活动在上海正式举行,此次 ...
- Linux 命令初识
Alt+Ctrl+F[1~6]:切换虚拟终端 如果要切换到第 2 号虚拟终端的话,按 Alt+Ctrl+F2 要切换回去的话,按 Alt+Ctrl+F1 #:为 root 用户的系统提示符 $:为普通 ...
- flask系列五之flask_script
1.一个简单的例子 在工程里面新建一个Python文件命名为manage.py (1)安装flask_script包,然后引入 from flask_script import Manager fro ...
- MSDE2000
安装MSDE2000的时候,遇到的两个问题 sqlserver 小版本 SQL安装问题.系统说:为了安全,要求使用SA密码,请使用SAPWD开关提供同一密码
- python发送包含html、图片、附件和链接的邮件
1.smtplib模块的使用 smtplib库用来发送邮件.需要用到的函数如下: 连接到SMTP服务器,参数为SMTP主机和端口: SMTP.connect([host[,port]]) 登录SMTP ...