tp+微信小程序实现多图片上传

        在微信小程序上，我们必不可少的会需要上传图片，更换头像，发表信息等等，都需要上传，今天我们就学习一下微信小程序基于thinkPHP如何实现多图片上传。

        其实图片上传，在thinkPHP也好，在laravel框架也罢，代码几乎差不多，只是一些函数调用上有所区别，但是想应用在laravel框架也是可以的。

        我们先从小程序上开始说起，图片上传分为单图片上传和多图片上传，单图片上传较为简单明了，通常用在更换头像，多图片上传比单图片上传多了一些逻辑数组处理，但是也不难。

        要实现图片上传，首先要调用 wx.chooseImage 函数。该函数的功能是从本地相册选择图片或使用相机拍照，因此我们需要给上传图片的按钮绑定一个事件，触发这个事件之后首先就要调用这个函数。

//按钮绑定
<button catchtap="imageUpload">图片上传</button>

        以下为函数的各属性值，详情访问链接

        https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

         通常情况下，个人只会用 count 属性和 success 成功回调函数，count 这个属性可以决定你上传的图片个数，最大为9张，最少为1张，一张就是单图片上传。代码实例如图下

//imageUpload 按钮触发事件

imageUpload:function(){
    let _this = this;    //将this赋给一个变量方便后面调用
    wx.chooseImage({    //选择图片方法
      count: 9,        //图片数量 1~9
      success:function(image){    //成功回调函数
          
          
        }
    })
}

         选择成功之后，因为是多图片，我们的 image 里不止有一张图，但是在后台上传云端却是单图片上传，因此我们需要使用 for 循环一下我们的 image ，以此来实现多张图片的上传。代码示例如下

imageUpload:function(){
    let _this = this;
    wx.chooseImage({
      count: 9,
      success:function(image){
          let imagePath = image.tempFilePaths;    //获取image中保存图片路径的数组
          var images = [];                        //定义一个空的数组方便后面使用
          //imagePath中包含了这个数组的长度，因此我们在设置循环的之后直接调length即可
          for (let i=0;i<imagePath.length;i  ){    
            
           })
          }
          
      }
    })
}

        在 for 循环中，我们选择了几张图片，那么上传方法就会调用几次，因为我们获取的数组是索引数组，下标是从0开始，因此多次循环我们也不会上传同一张图片，接下来我们就可以调用 wx.uploadFile 函数进行图片上传。

        wx.uploadFile 函数及属性详情：

https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

imageUpload:function(){
    let _this = this;
    wx.chooseImage({
      count: 9,
      success:function(image){
          let imagePath = image.tempFilePaths;
          var images = [];
          for (let i=0;i<imagePath.length;i  ){
            wx.uploadFile({
            filePath: imagePath[i],    //图片路径
            name: 'image',        //传到后台的图片名称
            url: 'http://www.class14.com/image',       //上述图片的后台路由
            success:function(res){        //成功回调函数
              
            }
           })
          }
      }
    })
  },

        接下来我们就需要在后台进行数据的处理，因为我使用的是七牛云，因此我们在写代码之前需要先安装。

composer require qiniu/php-sdk

         后台就很简单，我们只需要就收文件，定义图片名，定义七牛云的 AK、SK、bucket，然后执行上传代码即可。

public function image(Request $request){
        //接收文件，因为建立在for循环之下，所以我们只会接收到一张图
        $image = $request->file('image');
        //设置文件名，这里不懂的可以dd一下我们接收的图片对象即可
        //因为我们接收到的是对象，不是数组，所以需要使用 getOriginalName 获取上传的图片名
        //rand（）生成随机数   substr（）字符串截取   strrops（）从字符串最后一次出现开始
        $name = rand(11111,99999).substr($image->getOriginalName(),strrpos($image
                ->getOriginalName(),'.'));
        //getPathName   获取图片临时路径
        $path = $image->getPathname();
        
        //七牛云AK
        $accessKey = "*****"; 
        //七牛云SK       
        $secretKey = "*****";        
        $bucket = "*****";        //需要上传到的筒名

        $uploadMgr = new UploadManager();       //实例化图片上传
        $auth = new Auth($accessKey, $secretKey);        //AK、SK验证
        $token = $auth->uploadToken($bucket);        //验证成功调筒名
        //进行上传
        list($ret, $error) = $uploadMgr->putFile($token, $name, $path);        
        $url = "http://rd5bmceib.hn-bkt.clouddn.com/".$name;
        if ($error == ''){
            return json(['code'=>200,'msg'=>'上传成功','data'=>$url]);
        }
    }

        到此我们的图片已经上传到七牛云当中，接下来我们就该处理前台的数据，如何保存后端返回的图片在线链接。这时候就会用到我们在 for 循环之前定义的空数组，我们需要把循环 n 次的返回出来的多个图片在线连接保存在这个数组当中，这个数组不能放在循环内，放在循环内就会出现数据覆盖的情况。代码示例如下

imageUpload:function(){
    let _this = this;
    wx.chooseImage({
      count: 9,
      success:function(image){
          let imagePath = image.tempFilePaths;
          var images = [];
          for (let i=0;i<imagePath.length;i  ){
            wx.uploadFile({
            filePath: imagePath[i],
            name: 'image',
            url: 'http://www.class14.com/image',
            success:function(res){
              //将后端返回的数据通过JSON.parse转换为数组形式
              var json = JSON.parse(res.data) 
              if (json.code == 200) {    
                images[i] = json.data    //i 为我们在循环的下标
                //传到data中定义好的一个数组，就可以实现上传图片展示
                _this.setData({    
                  imageFile:images
                })
              }
            }
           })
          }
      }
  },

        多图片上传已经上传成功.

这篇好文章是转载于：学新通技术网