小程序上传多图片多附件多视频 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(), 0, "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 = 1; result.data = path; } catch (Exception ex) { result.status = -1; 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直接使用 ，欢迎交流学习！
