前言：
最近在研究微信小程序，本人自己是C#写后端的;感觉小程序挺好玩的，就自己研究了一下；刚好今天又给我需求，通过小程序上传多图 然后php后端保存到服务器；
前端上传需要用到流，然后就接收 保存；
小程序端的比较完整，能上传图片 删除图片 查看图片，文件或者视频也可以；
进入主题；
效果图：
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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
总结：参考小程序官方文档 小程序上传图片跟附件demo.zip
小程序用的是插件：可以上传图片跟附件包括视频；
研究基于半天 ，也坑了半天，重点要心细！
下载demo直接使用 ，欢迎交流学习！