码迷,mamicode.com
首页 > 微信 > 详细

微信小程序 上传图片

时间:2019-02-11 12:34:00      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:console   header   上传   images   show   ons   temp   tempfile   []   

技术图片

效果图  如上,js  如下,在页面循环图片就可以

  /**
   * 选择图片
   */
  uploadImgAdd: function(e) {
    var imgs = this.data.imgs;
    wx.chooseImage({
      sizeType: [‘original‘, ‘compressed‘],
      sourceType: [‘album‘, ‘camera‘],
      success: (res) => {
        for (let j in res.tempFilePaths){
          if (res.tempFilePaths[j].substring(res.tempFilePaths[j].length - 3)  == ‘gif‘){
            wx.showToast({
              title: ‘暂不能上传动图哦,换张图片试试吧~‘,
              icon: ‘none‘,
              duration: 2000,
              mask: true,
            })
            res.tempFilePaths.splice(j, 1)
          }
        }
        let tempFilePaths = this.data.tempFilePaths.concat(res.tempFilePaths);
        this.setData({
          tempFilePaths: tempFilePaths
        })
        let uploadimagsSrc = []
        for (var i = 0; i < tempFilePaths.length; i++) {   //转换为七牛地址
          if (imgs.length >= 9) {
            return false;
          } else {
            wx.uploadFile({
              url: app.data.urls + ‘images/Picture‘,
              filePath: tempFilePaths[i],
              header: {
                ‘content-type‘: ‘multipart/form-data‘
              },
              name: ‘file‘,
              success: res => {
                let data = res.data;
                console.log(res)
                uploadimagsSrc = [...uploadimagsSrc, data];
                this.setData({
                  uploadimagsSrc: uploadimagsSrc
                })
              },
              fail: (res) => {
                console.log(res)
                if (res.errMsg == "uploadFile:fail Broken pipe"){
                  
                }
              }
            })
          }
        }
      },fail:(res)=>{
        console.log(res)
      }
    })
  },


  /**
   * 删除图片
   */
  uploadImgClose: function(e) {
    var imgs = this.data.tempFilePaths;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      tempFilePaths: imgs,
      uploadimagsSrc: imgs
    });
  },

/pulishComment/pulishComment
 

 

微信小程序 上传图片

标签:console   header   上传   images   show   ons   temp   tempfile   []   

原文地址:https://www.cnblogs.com/zhenga/p/10361182.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!