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

本文主要是介绍微信小程序上传图片及上传到上传到七牛云，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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;
    }
  
  })();

这篇关于微信小程序上传图片及上传到上传到七牛云的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！