博客

之前，也发过 Vant  Weapp组件的使用，现在给大家提供一下PHP uploader文件上传 代码

小程序端代码:
  wxml ------

       <van-uploader file-list="{{ fileList }}" preview-full-image="true" multiple="true" 
        preview-image="true"
        bind:after-read="uoload" bind:delete="del" />

js 片段    


 data: {
      arr:[],
      fileList: [],  //文件上传时 在前端展示上传的图片
      newArr:[]   //点击删除按钮的时候 进行赋值
  },
  //点击删除图片
  del(event){
     let id = event.detail.index   //能获取到对应的下标
     let newArr = this.data.newArr   //这里引用 上传的数组 
     let fileList = this.data.fileList  //这里是前端页面展示的数组
     newArr.splice(id,1)     //根据下标来删除对应的图片
     fileList.splice(id,1)
     this.setData({
       fileList:fileList,  //在这里进行重新赋值  删除后 图片剩几张就相当于给后台传几张
       newArr:newArr
     })
  },
//上传访问后台接口
  uoload(event){
    var img = event.detail.file;
    let that = this;
    let arr = this.data.newArr
    that.setData({
      fileList:img
     })
    img.map(function(v,k){  //这里是多文件上传 使用map
      let imgs = v.url;
       //let token = wx.getStorageSync('token');

        wx.uploadFile({   //这里一定要用  wx.uploadFile 否则无法穿到后台
        filePath: imgs, //你要上传的路径
        name: 'file',   //你上传到后台的name值
        formData:{    // 如果你要验证你的token 可以用formData来给后台传值
         token:token
        },
        url: '你要上传的接口',
        success(res){
          let img = res.data
          console.log(img)
          arr.push(img);   //返回图片的路径  并追加到新数组里面
          that.setData({
            newArr:arr   //在这里重新赋值，用来做删除
          })
        }
      })
    })
  },

后台代码：   这里采用了阿里云的文件上传   请自行翻阅阿里云 oss存储

  /*
     * 文件上传
     * */
    public function imageUploud(Request $request){
        $data  = $request->file('file')->getPathname();

        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进 
        行API访问或日常运维，请登录RAM控制台创建RAM账号。

        $accessKeyId = "";

        $accessKeySecret = "";
        // Endpoint以杭州为例，其它Region请按实际情况填写。

        $endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
        // 设置存储空间名称。

        $bucket= "";
        // 设置文件名称。
        $object = rand(1111,22222222).'.jpg';
       // <yourLocalFile>由本地文件路径加文件名包括后缀组成，例如/users/local/myfile.txt。

        $filePath = $data;

        try{
            $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);

            $data = $ossClient->uploadFile($bucket, $object, $filePath);
            return   $data['info']['url']; //返回上传到阿里oss存储路径
        } catch(OssException $e) {
            printf(__FUNCTION__ . ": FAILED\n");
            printf($e->getMessage() . "\n");
            return;
        }

    }