[移动开发]小程序实现多文件上传及展示

1.给挂载点绑定一个点击事件

    <view class="uppic" bind:tap="upfile">
      <text class="iconfont icon-jiahao"></text>
    </view>

2.在js中插入以下代码

  upfile(){
    //定义以下this
    let that=this
    //在缓存中拿到token
    let token=wx.getStorageSync('token')
    //在缓存中拿到openid
    let openid=wx.getStorageSync('openid')
    //触发文件上传窗口
    wx.chooseImage({
      success:res=>{
        //在成功回调中定义一个数组
        let arr=[]
        //循环添加图片的零时路径
        res.tempFilePaths.map(filePath=>{
          //开始上传文件
          wx.uploadFile({
            //定义必要属性，要上传的文件
            filePath: filePath,
            //定义必要属性，后端接值的名称
            name: 'file',
            //定义必要属性，要访问的后端地址
            url: 'http://www.zf.com/api/upfile',
            //非必要属性，header里加入token
            header: {
              'Authorization': 'Bearer ' + token
            },
            //提交除文件以外的值，这里传了openid
            formData: {
              openid
            },
            success(ret){
                //在回调中要将返回的数据转换成JSON格式，这一步很重要
                let data=JSON.parse(ret.data)
                //将路径添加到提前定义好的数组中
                arr.push(data.data) 
                //更新到data中
                that.setData({
                  upfile:arr
                })  
            }
          })
        })
      }
    })
  },

3.展示小程序前台代码，循环展示出来

    <view class="imglist">
      <block wx:for="{{upfile}}" wx:key="hhh">
        <image src="{{ item }}" />
      </block>
    </view>

4.展示后台代码（php代码）

    public function upfile(Request $request)
    {
        //接收openid
        $openid=$request->post('openid');
        //将文件保存在本地
        $filePath='http://www.zf.com/'.$request->file('file')->store('/image/sfz');
        return ['code'=>200,'msg'=>'获取成功','data'=>$filePath];
    }