微信小程序之上传文件

配置好新浪云服务器后，接下来我们就写一个上传图片的功能来演示如何与服务器交互开发

首先创建一个干净的微信小程序项目

然后在index.wxml文件里写入：

<button bindtap='uploadimg'>上传图片</button>

<image src='{{imgSrc}}'></image>

 

在index.js里写入：

Page({
  data:{
    imgSrc:""
  },
  uploadimg:function(){
    var that = this;
    wx.chooseImage({
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        that.setData({
          imgSrc: tempFilePaths[0]
         });
        console.log(tempFilePaths);
      }
    })
  }
 
})

通过上面的代码我们先测试看看能不能取到本地图片

运行代码可以看到，可以正常显示图片

接下来就是写php服务器文件了

首先新建一个upload_handle.php文件在index目录下，然后里面代码如下：

<?php
  //sae存储文件的方法
  $s = new SaeStorage();
  ob_start();
  readfile($_FILES['fileup']['tmp_name']);
  $img = ob_get_contents();
  ob_end_clean();
  //获取文件大小
  $size = strlen($img);
  file_put_contents(SAE_TMP_PATH."/bg.jpg",$img);
  if($s->upload("test","test.jpg",SAE_TMP_PATH."/bg.jpg")){
    echo "上传成功";
  }else{
    echo "上传失败";
  }
?>

将这个文件打包成压缩文件然后上传到创建好的云仓库（新浪云版本库）

不用你解压，服务器会自动解压获取php文件。

下面再修改一下uploadimg方法：

  uploadimg:function(){
    var that = this;
    wx.chooseImage({
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        // that.setData({
        //   imgSrc: tempFilePaths[0]
        // });
        // console.log(tempFilePaths);
        wx.uploadFile({
          url: 'https://example001.applinzi.com/upload_handle.php',//这里放上你自己的二级域名地址
          filePath: tempFilePaths[0],
          name: 'fileup',
          success:function(res){
            var data = res.data;
            console.log(data);
          },
          fail:function(){
            console.log('fail');
          }
        })
      }
    })
  },

忘了提一点，还要配置一个存放上传文件的仓库storage的Bucket

然后重新运行程序，点击上传图片，可以看到控制台输出上传成功信息，然后去到Bucket里的test库可以看到图片已经上传上去了