【微信小程序】多图上传(区分已上传和未上传的图片)和上传视频的封装方法

 

微信小程序中，上传图片一直是我最烦的东西，尤其是涉及到编辑，新老图片的交替，更是让人头大，所以我写了一个公共的方法来解决这个问题   该方法存放于util.js中

//多图片上传   arr需上传图片的数组     fun所有图片都上传成功后的回调函数
var uploadImgs1 = function (arr, fun) {
  let that = this;
  let num = arr.length;
  let imgBox = [];
  upload(arr, 0, imgBox, fun);
  wx.showLoading({
    title: '上传中...',
  })
}
var upload = function (arr, n, imgBox, fun) {
  let that = this;
  let str = arr[n]; 
  console.log(str);
//上传成功后图片地址一致的部分，用来判断图片是否已经上传过。
  let flag = str.indexOf("https://xxxxxx"); 
  if(flag==-1){                        
    let isurl = "xxxxxxxxxxxxxxxxxxxx"; //上传接口
    wx.uploadFile({
      url: isurl,
      filePath: arr[n],
      name: 'file',
      success(res) {
        var data = res.data;
        console.log(data);


//这部分是用来处理我们后端返回的数据的。 这一块需要以你们后台返回的数据准，来组合出完整的图片地址
//data里是该图片的网络地址
        data = JSON.parse(data);
        if(data.code==1){ //我们后台回调成功的判断
          data = "https://waterstation.com.cn/szm" + data.data; 
//我们后台返回的数据需要转json和拼接，如果你们不需要则忽略这一部分



//这一部分为核心
          imgBox.push(data);  //将上传成功的图片的地址放入imgBox中
          n++;                //指针+1
          if (n == arr.length) {  //如果指针等于数组长度，说明多图上传完毕
            wx.hideLoading();
            typeof fun == "function" && fun(imgBox); //返回imgBox
            return;
          } else {            //else 则表明还有图片需要上传，继续执行upload方法。
            upload(arr, n, imgBox, fun);
          }
        }else{
          wx.hideLoading();
          alert1("上传失败！");
          return;
        }
        
      },
      fail:function(){
        wx.hideLoading();
        alert1("上传失败！");
        return;
      }
    })
  }else{
    imgBox.push(arr[n]);
    n++;
    if (n == arr.length) {
      wx.hideLoading();
      typeof fun == "function" && fun(imgBox);
      return;
    } else {
      upload(arr, n, imgBox, fun);
    }
  }
}

//上传视频
var uploadVideo1=function(fun){
  let that = this;
  wx.chooseVideo({
    sourceType: ['album', 'camera'],
    maxDuration: 60,
    camera: 'back',
    success(res) {
      console.log(res.tempFilePath)
      let size = res.size;
      if (size<=10485760){
        wx.showLoading({
          title: '上传中...',
        })
        wx.uploadFile({
          url:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // 仅为示例，替换为你们的上传接口
          filePath: res.tempFilePath,
          name: 'file',
          success(res1) {
            console.log(res1);
            wx.hideLoading();
            var data = res1.data;
            data = JSON.parse(data);

            if(data.code==1){  //我们后台回调成功的参数
              data = "https://waterstation.com.cn/szm/" + data.data;//拼接与否，视后台数据为准
              typeof fun == "function" && fun(data); //返回地址
            }else{
              wx.hideLoading();
              alert1("视频上传失败");
            }


          },
          fail(){
            wx.hideLoading();
            alert1("视频上传失败");
          }
        })
        
      }else{
        alert1("视频大小超过10M,请重新选择");
      }
      
     }
  })
}

module.exports = {
  uploadImgs: uploadImgs1, //上传多图
  uploadVideo: uploadVideo1,//上传视频
}

使用方法：

import util from "../utils/util.js";  //引入公共方法
upLoadShopPic(){
    let that = this;
    wx.chooseImage({
      count: 1,  //限制张数
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths);
        util.uploadImgs(tempFilePaths, function (res) {
          console.log(res); //返回地址组成的数组
          that.setData({
            shopPic: res[0] //上传单张只取一个。多张直接用res赋值即可
          })
        })
      }
    })
  },

util.uploadImgs(arr,fun)；这个方法中可传入两个参数， arr是通过chooseImages的方法获取的临时地址的数组 ，fun是一个方法可以将上传成功后的网络地址数组带出来。

上传视频的方法：

import util from "../utils/util.js";  //引入公共方法
uploadVideo(){
    let that = this;
    util.uploadVideo(function(res){
      console.log(res);
      that.setData({
        videoUrl:res
      })
    })
 },

注意：

① 要将上传的地址替换成你们项目的上传地址

② 要根据你们的网络地址的特征来定义已上传和未上传图片的区分

③ 根据自己后台的返回组成完整网络地址push进imgBox中

④可将已上传和未上传的图片存放在同一数组中，放入多图上传的函数中，函数会通过根据你填写的已上传图片的区别来自动过滤掉已上传图片，并返回，不改变之前的图片地址顺序