小程序+thinkphp3.2上传图片

最近写了不少上传图片，可以看看我其他文章，小白一个，写的不好多多指出
冲冲冲，上小程序代码
小程序页面

<view class='astrict'>
<!-- 判断chooseImageUrl如果没有就不加载本模块，这是前面显示上传的图片的模块。 -->
<view wx:for="{{chooseImageUrl}}" wx:key="{{key}}" class='chooseImageWrap'>
<image class='chooseImage' src='{{item}}' ></image>
<text class='chooseImageClose' data-index="{{index}}" bindtap='Close'> X</text>
<!-- data-index="{{index}}"之定义属性，后面删除图片的时候需要用到它 -->
</view>

 <!-- 加号的框  chooseImageUrl.length当超过2张的时候就不在显示 -->
<view wx:if='{{chooseImageUrl.length<2}}' class="ax" style="cursor: pointer;" bindtap='paizhao'>
<image class="img" src="./img/DottedLine.png" ></image>
</view>

js

 // 增加的图片
  paizhao: function () {
    var that = this
    // var attach = []
    wx.chooseImage({//上传接口可以去文档里面看看
      sourceType: ['album', 'camera'],
      sizeType: ['original'],
      count: 2,
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;//上传的临时路径
        console.log(tempFilePaths)
        console.log("路径")
        var len = that.data.imgCount + tempFilePaths.length
        //len 是此时已有的张数和本次上传的张数的和，也就是本次操作完成页面应该有的张数，因为用户可能会多次选择图片，所以每一次的都要记录下来。
        if (len > 2) {
          wx.showToast({
            title: '最大数量为2',
            icon: 'loading',
            duration: 1000
          })
          //超过结束
          return false
        }
        for (var i = 0; i < tempFilePaths.length; i++) {
          //将api 返回的图片数组push进一开始的imgArr，一定要循环一个个添加，因为用户上传多张图直接push就会多个路径在imgArr的同一个元素里。不然会报错
          imgArr.push(tempFilePaths[i]);
        }
        // console.log("断点1")
        //将此时的图片长度和存放路径的数组加到要渲染的数据中
        that.setData({
          imgCount: len,
          chooseImageUrl: imgArr
        })
      }
    })
  },

  //点关闭按键
  Close: function (e) {
    var mylen = this.data.chooseImageUrl.length;//当前渲染的数组长度
    var myindex = e.currentTarget.dataset.index;//当前点击的是第几张图片 data-index
    imgArr.splice(myindex, 1)//将这张图充存放图片的数组中删除
    this.setData({
      imgCount: mylen - 1,//长度减一
      chooseImageUrl: imgArr//将删除图片后的数组赋给要渲染的数组
    })
  },
  
  //上传
       let token = this.data.uploadToken;//拿到token
        let chooseImageUrl = this.data.chooseImageUrl;//拿到地址
        // console.log(chooseImageUrl)
        // console.log("断点3")
        // var str = chooseImageUrl.join(',')
        for(var i = 0;i<chooseImageUrl.length; i++){
          wx.uploadFile({
            url: 'https://upload-z2.qiniup.com',//每个地区上传的地址不一样的，记得更换
            name: 'file',
            filePath: chooseImageUrl[i],
            // filePath: item,
            header: {
              "Content-Type": "multipart/form-data"
            },
            formData: {
              token: token,
            },
            success: function (res) {
              let content = JSON.parse(res.data)
              // let content = res.data
              console.log(content)
              wx.request({
                url: '写你们你们需要保存的方法',
                method: 'post',
                data: {
                  content: content,
                  appid: appid
                },
                header: {
                  'content-type': 'application/json' // 默认值
                },
                success: function(res){
                  // 保存成功
                }
              })
            },
            fail: function (res) {
              console.log(res)
            }
          })
        }
       
       //获取Token 放onLoad
           wx.request({
      url: '去后台拿token',
      success: function (res) {
        that.setData({
          uploadToken: res.data
        })
      }
    })
       

七牛云生成token方法
记得引用
和下载sdk
官方地址https://developer.qiniu.com/sdk#official-sdk
引用

use Qiniu\Auth;
use Qiniu\Storage\UploadManager;

    // 七牛云生成token
    public function QNimage(){
        require('./ueditor/qiniu/autoload.php');
        $accessKey = '放accessKey';
        $secretKey = '放secretKey';
        $auth = new Auth($accessKey, $secretKey);
        $bucket = 'tp';
        // 生成上传Token
        $token = $auth->uploadToken($bucket);
        echo json_encode($token);
    }

总结：
1.写拿token方法
2.进入拿到token
3.用接口拿到图片，放数组里面，这样方便修改
4.调用上传接口，循环上传到七牛上面
5.到回调里面拿到路径保存