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

Posted 2021-06-14 lude1994

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

 

 

 

1.创建子组件tpupload

// wxml文件

<view style="padding: 10px;">
   <!-- 图片上传 -->
  <view class="weui-uploader">
    <view class="img-v weui-uploader__bd">
      <view class=\'pic\' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
          <image class=\'weui-uploader__img \'
                  src="{{item}}"
                  data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
                    <icon type=\'cancel\' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
          </image>
      </view>
      </view>
    </view>
      
      

  <!-- 用来提示用户上传图片 -->
  <view class="weui-uploader__input-box pic addimage" bindtap="uploadImages"  wx:if="{{imgs.length <= 9}}"> 
    <image src="/images/upload.png" style="width: 120rpx; height: 120rpx"></image>
  </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 {
  width: 20px;
}
.addimage {
  /* padding: 10px; */
  /* border: 1px solid #ddd;
  border-radius: 10px;
  width: 100rpx;
  height: 100rpx; */
  
}
 
.pic {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 120rpx;
  height: 120rpx;
  border-radius: 6px;
  overflow: hidden;
  }
  .pic image {
    width: 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;
    }
  
  })();