微信小程序上传图片及上传到上传到七牛云

微信小程序图片上传功能包含：上传到七牛云、删除图片、查看图片

1.创建子组件tpupload

// wxml文件

<view class="weui-uploader">





<view class="weui-uploader__bd " style="flex-wrap: wrap; display: flex;">



<block wx:for="{{imgs}}" wx:key="*this" >



<view class="weui-uploader__file">



  <image class="weui-uploader__img" src="{{item}}"  bindtap="previewImg" data-index="{{index}}" data-imgs="{{imgs}}">



 
  </image>
  <view style="position: absolute; right: 0; top: 0">
    <icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
  </view>
</view>



</block>



<view class="weui-uploader__input-box">
  <view class="weui-uploader__input-box pic addimage" bindtap="uploadImages"  wx:if="{{imgs.length < 9}}"> 
    <image src="/images/upload.png" style=" 140rpx;" mode="aspectFit" ></image>
  </view>
<!-- <input class="weui-uploader__input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="" bindtap='uploadImages' name="images"></input> -->



</view>



</view>



</view>

//json文件

{
  "component": true,
  "usingComponents": {}
}

// js文件

// components/tpupload/tpupload.js
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    uploadDesc:String,
    tpKey:String,
    tpNum:Number,
    imgs:Array,
  },

  /**
   * 组件的初始数据
   */
  data: {
    imgs:[]
  },
  lifetimes: {
    attached: function() {
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  pageLifetimes: {
    show(){
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    
  // 删除图片
  deleteImg(e) {
    var imgs = this.data.imgs;
    var that = this;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    that.setData({
      imgs: imgs
    });
    that.triggerEvent('tpupload',{
      imgs:imgs
    })
  },

  // 预览图片
  previewImg(e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  },
  // 上传图片-多张
  uploadImages() {
    var that = this;
    var imgs = that.data.imgs;
    wx.chooseImage({
      // count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        if(imgs.length + tempFilePaths.length > that.data.tpNum){
          wx.showToast({
            icon:'error',
            title:"上传不能超过"+that.data.tpNum+"张"
          })
          return
        }
        for (var i = 0; i < tempFilePaths.length; i++) {
            imgs.push(tempFilePaths[i]);
        }
        that.triggerEvent('tpupload',{
          imgs:imgs
        })
        that.setData({
          imgs: imgs
        });
      }
    });
  },
  }
})

// wxss

/* pages/component/uplaodimages/index.wxss */
.icon {
   20px;
}
.addimage {
  /* padding: 10px; */
  /* border: 1px solid #ddd;
  border-radius: 10px;
   100rpx;
  height: 100rpx; */
  
}
 
.pic {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
   120rpx;
  height: 120rpx;
  border-radius: 6px;
  overflow: hidden;
  }
  .pic image {
     100%;
    height: 100%;
  }
   
  .delete-btn{
    position: absolute;
    top: 0;
    right: 0;
  }
  .maincenter {
    justify-content: center;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
}
   
  .weui-uploader{
    padding: 10rpx;
  }

2.七牛云图片上传函数封装

import qiniuUploader from "../static/lib/qiniuUploader"; // 引入七牛云官方的js，若出现下载的有问题，可以试试我的，放在最底部了

function uploadFile(imgArr, callback){
  let promisevariable = new Promise(function (resolve, reject) {
    qiniuUploader.upload(
      imgArr, //上传的图片
      (res) => {  //回调 success
        console.log(res, '七牛云返回')
        resolve(res.imageURL)
      }, (error) => { //回调 fail
        reject('error');
      },
      { // 参数设置  地区代码 token domain 和直传的链接 注意七牛四个不同地域的链接不一样，我使用的是华南地区
        region: 'z2',
        uptokenURL: getApp().globalData.host+'/xxxx',
        uploadURL: 'https://cdn.xxx.com',
        domain: 'https://cdn.xxx.com',
      })
  })
  return promisevariable;
}

3.父组件使用子组件

// json文件中引入子组件

"tpupload": "/component/tpupload/tpupload",

//wxml文件中引入子组件

<tpupload bind:tpupload="tpupload" imgs="{{imgs}}" tpNum='9' ></tpupload>

// 发布规则，先上传图片到七牛云，再将七牛云返回的图片地址一起将参数传给后台

  // 发布
  publish(e) {
   if(this.data.imgs.length <= 0) {
      reFun.toastBox('error', '请上传至少1张图片')
      return;
   }
  　var obj = {}; // 用来传给后台的参数var arr = []; // 
    for(let i = 0; i < this.data.imgs.length; i++) {
      var promiseFun = reFun.uploadFile(this.data.imgs[i]) // 将promise封装的函数进行赋给变量
      arr.push(promiseFun)
    }
    Promise
        .all(arr) // arr是通过循环遍历而来的函数数组，all是一起执行数组里所有的函数
        .then(function(results){ // results返回的是处理所有函数返回 的结果
      　　　　
      　　　obj.imgs = results; // 将图片放进obj里，再传给后台
            uriFun.saveSecondShop(this, obj)
      
        });

  },

// 如果下载的七牛云js有问题，可以试试

(function () {

    var config = {
      qiniuRegion: '',
      qiniuImageURLPrefix: '',
      qiniuUploadToken: '',
      qiniuUploadTokenURL: '',
      qiniuUploadTokenFunction: null,
      qiniuShouldUseQiniuFileName: false
    }
  
    module.exports = {
      init: init,
      upload: upload,
    }
  
    // 在整个程序生命周期中，只需要 init 一次即可
    // 如果需要变更参数，再调用 init 即可
    function init(options) {
      config = {
        qiniuRegion: '',
        qiniuImageURLPrefix: '',
        qiniuUploadToken: '',
        qiniuUploadTokenURL: '',
        qiniuUploadTokenFunction: null,
        qiniuShouldUseQiniuFileName: false
      };
      updateConfigWithOptions(options);
    }
  
    function updateConfigWithOptions(options) {
      if (options.region) {
        config.qiniuRegion = options.region;
      } else {
        console.error('qiniu uploader need your bucket region');
      }
      if (options.uptoken) {
        config.qiniuUploadToken = options.uptoken;
      } else if (options.uptokenURL) {
        config.qiniuUploadTokenURL = options.uptokenURL;
      } else if (options.uptokenFunc) {
        config.qiniuUploadTokenFunction = options.uptokenFunc;
      }
      if (options.domain) {
        config.qiniuImageURLPrefix = options.domain;
      }
      config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName
    }
  
    function upload(filePath, success, fail, options, progress, cancelTask, before, complete) {
      if (null == filePath) {
        console.error('qiniu uploader need filePath to upload');
        return;
      }
      if (options) {
        updateConfigWithOptions(options);
      }
      if (config.qiniuUploadToken) {
        doUpload(filePath, success, fail, options, progress, cancelTask, before, complete);
      } else if (config.qiniuUploadTokenURL) {
        getQiniuToken(function () {
          doUpload(filePath, success, fail, options, progress, cancelTask, before, complete);
        });
      } else if (config.qiniuUploadTokenFunction) {
        config.qiniuUploadToken = config.qiniuUploadTokenFunction();
        if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
          console.error('qiniu UploadTokenFunction result is null, please check the return value');
          return
        }
        doUpload(filePath, success, fail, options, progress, cancelTask, before, complete);
      } else {
        console.error('qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]');
        return;
      }
    }
  
    function doUpload(filePath, success, fail, options, progress, cancelTask, before, complete) {
      if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
        console.error('qiniu UploadToken is null, please check the init config or networking');
        return
      }
      var url = uploadURLFromRegionCode(config.qiniuRegion);
      var fileName = filePath.split('//')[1];
      if (options && options.key) {
        fileName = options.key;
      }
      var formData = {
        'token': config.qiniuUploadToken
      };
      if (!config.qiniuShouldUseQiniuFileName) {
        formData['key'] = fileName
      }
      before && before();
      var uploadTask = wx.uploadFile({
        url: url,
        filePath: filePath,
        name: 'file',
        formData: formData,
        success: function (res) {
          var dataString = res.data
          //   // this if case is a compatibility with wechat server returned a charcode, but was fixed
          //   if(res.data.hasOwnProperty('type') && res.data.type === 'Buffer'){
          //     dataString = String.fromCharCode.apply(null, res.data.data)
          //   }
          try {
            var dataObject = JSON.parse(dataString);
            //do something
            var fileUrl = config.qiniuImageURLPrefix + '/' + dataObject.key;
            dataObject.fileUrl = fileUrl
            dataObject.imageURL = fileUrl;
            // console.log(dataObject);
            if (success) {
              success(dataObject);
            }
          } catch (e) {
            console.log('parse JSON failed, origin String is: ' + dataString)
            if (fail) {
              fail(e);
            }
          }
        },
        fail: function (error) {
          console.error(error);
          if (fail) {
            fail(error);
          }
        },
        complete: function (err) {
          complete && complete(err);
        }
      })
  
      uploadTask.onProgressUpdate((res) => {
        progress && progress(res)
      })
  
      cancelTask && cancelTask(() => {
        uploadTask.abort()
      })
    }
  
    function getQiniuToken(callback) { 
      wx.request({
        url: config.qiniuUploadTokenURL,
        header: {
          'Content-Type': "application/json",
        //   'Cookie': 'vertx-web.session=' + wx.getStorageSync("sessionId")
        },
        success: function (res) {
          var token = res.data.message;
          if (token && token.length > 0) {
            config.qiniuUploadToken = token;
            if (callback) {
              callback();
            }
          } else {
            console.error('qiniuUploader cannot get your token, please check the uptokenURL or server')
          }
        },
        fail: function (error) {
          console.error('qiniu UploadToken is null, please check the init config or networking: ' + error);
        }
      })
    }
  
    function uploadURLFromRegionCode(code) {
      var uploadURL = null;
      switch (code) {
        case 'ECN': uploadURL = 'https://up.qiniup.com'; break;
        case 'NCN': uploadURL = 'https://up-z1.qiniup.com'; break;
        case 'z2': uploadURL = 'https://up-z0.qiniup.com'; break;
        case 'NA': uploadURL = 'https://up-na0.qiniup.com'; break;
        case 'ASG': uploadURL = 'https://up-as0.qiniup.com'; break;
        default: console.error('please make the region is with one of [ECN, SCN, NCN, NA, ASG]');
      }
      return uploadURL;
    }
  
  })();