小程序上傳多圖片多附件多視頻 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直接使用 ，歡迎交流學習！