微信小程序上传+动态读取

先安装oss扩展

后台处理数据

public function upload()
    {
      $filePath=$_FILES['file']['tmp_name'];
        $fileName = (new Oss())->uploadFile($filePath);
        return json(['code'=>200,'msg'=>"上传成功",'url'=>$fileName]);


    }

 //图片上传
  onChangeTap(evn){
    //获取最新上传的所有图片临时路径
    let tempFilePaths = evn.detail.current;
    //定义一个空数组，进行存放上传图片url
    var urlArr = [];
    for (let index = 0; index<tempFilePaths.length; index++) {
      wx.uploadFile({
        url: 'http://www.zc.com/api/upload', //仅为示例，非真实的接口地址
        filePath: tempFilePaths[index],
        name: 'file',
        success: res => {
          const data = JSON.parse(res.data);
          //do something
          urlArr.push(data.url)
          this.setData({
            urls: urlArr
          })
        }
      })

    }

},
//删除图片，处理数据
removeImage(event) {
 //图片数组
 let urls = this.data.urls;
 //js根据指定下标删除元素，第一个参数是下标，第二个参数是从这个下标移出几个元素
 urls.splice(event.detail.index, 1)
 this.setData({
   urls
 })
},

表单添加页面

<form bindsubmit="formAdd">
  <l-input label="名称："  name="fang_name" placeholder="请输入房源名称"  />
  <l-image-picker count="9" bind:linchange="onChangeTap" bind:linremove="removeImage"/>
    <l-l-form-item>

      <l-input label="地址:"  name="city" bindtap="map"  />
  {{date}}
    </l-l-form-item>
<l-form-item label="房源类型:" >
  <view class="section">
  <picker bindchange="bindPicker" name="state" value="{{array[index].name}}" range="{{array}}"  range-key="name">
    <view class="picker" >
      当前选择：{{array[index].name}}
    </view>
  </picker>
</view>
</l-form-item>
  <l-form-item label="户型:" >
  <view class="section">
  <picker bindchange="Change" name="states" value="{{dataRes[inde].name}}" range="{{dataRes}}" range-key="name">
    <view class="picker">
      当前选择：{{dataRes[index].name}}
    </view>
  </picker>
</view>
</l-form-item>
<l-form-item label="卧室类型:" >
  <view class="section">
  <picker bindchange="bind" name="stata"  value="{{datas[ind].name}}" range="{{datas}}" range-key="name">
    <view class="picker">
      当前选择：{{datas[index].name}}
    </view>
  </picker>
</view>
</l-form-item>
<l-input label="面积："  name="fang_mianji" placeholder="请输入面积"  />
<l-input label="室友要求"  name="fang_shi" placeholder="请输入室友性别"  />
<l-input label="租金"  name="fang_price" placeholder="请输入租金价格"  />
  <button type="default" form-type="submit">提交</button>
</form>

js处理页面

page({

 data: {
      //图片
      urls: [],
    //选择地址
    date:"请选择地址",
    //房源类型
    array: [],
   //户型
    datas:[],
    //卧室类型
    dataRes:[]
  },
  //地址绑定事件
  map(){
    wx.chooseLocation({
      success:ret=>{
       this.setData({
         date:ret.name +ret.address
       })
      }
    })
    },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    wx.request({
      url: 'http://www.zc.com/api/fang_attr',
      success:res=>{
       this.setData({
        array:res.data.data,
        dataRes:res.data.dataRes,
        datas:res.data.datas
       })
      }
    })
  },
  //房源类型
  bindPicker: function(e) {
    this.setData({
      index: e.detail.value
    })
  },
  //户型
  Change:function(e){
    console.log(e)
    this.setData({
      inde:e.detail.value
    })
  },
  //卧室类型
  bind:function(e){
    console.log(e)
    this.setData({
      ind:e.detail.value
    })
  },
//添加数据
formAdd:function(e){
  console.log(e)
  // return
  // // return
  wx.request({
    url: 'http://www.zc.com/api/create',
    method:"POST",
    data:{
      city:this.data.date,
      fang_name:e.detail.value.fang_name,
      state:e.detail.value.state,
      states:e.detail.value.states,
      stata:e.detail.value.stata,
      fang_mianji:e.detail.value.fang_mianji,
      fang_price:e.detail.value.fang_price,
      fang_shi:e.detail.value.fang_shi,
    },
    success:ret=>{
     console.log(ret)
    }
  })
},

})

后台处理数据

 public function fangAttr()
    {
        //房源类型
        $data=FangAttr::where('fang_name','=','fang_direction')->find()->value('id');
        $data =  FangAttr::where('pid','=',$data)->select()->toArray()  ;
        //户型
        $dataRes=FangAttr::where('fang_name','=','fang_type')->find()->id;
        $dataRes =  FangAttr::where('pid','=',$dataRes)->select()->toArray();

        $datas=FangAttr::where('fang_name','=','fang_bedroom _type')->find()->id;
        $datas =  FangAttr::where('pid','=',$datas)->select()->toArray();


        return json(['code'=>200,'msg'=>'查询成功','data'=>$data,'dataRes'=>$dataRes,'datas'=>$datas]);

    }