小程式上傳多圖片多附件多視頻 c#後端

標籤：++   duration   fun   json   pre   上傳   exce   else   back   

前言：

最近在研究小程式，本人自己是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直接使用 ，歡迎交流學習！

 

小程式上傳多圖片多附件多視頻 c#後端