微信小程序文件上传结合lin ul

html

<l-form name="goods" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit"
>
    <l-form-item label="商品分类:"rules="{{goods.goods_type}}" name="goods_type">
        <l-input id="goods_type"  hide-label show-row="{{false}}"/>
    </l-form-item>

    <l-form-item label="商品属性:" roles="{{goods.goods_attr}}" name="goods_attr">
        <l-input id="goods_attr"  hide-label show-row="{{false}}"/>
    </l-form-item>

    <l-form-item label="标题:" name="goods_name" roles="{{goods.goods_name}}">
        <l-input id="goods_name"  hide-label show-row="{{false}}"/>
    </l-form-item>

    <l-form-item label="商品描述:" name="desc" roles="{{goods_name}}">
        <l-textarea border="{{false}}" roles="{{desc}}" id="desc" value="{{desc}}" />
    </l-form-item>
    <l-image-picker size="4" bind:linchange="onChangeTap" />
    <view slot="submit">
        <l-button>提交</l-button>
    <iew>
    <view slot="reset">
        <l-button type="default" plain>重置</l-button>
    <view>
</l-form>

js

  Page({

  /**
   * 页面的初始数据
   */
  data: {
    TimeID: -1,
    goods_img:[],
    goods:{
      goods_type:{
        required: true,
        message: '分类不能为空',
        trigger: 'change'
      }
    }
    
   },

  onChangeTap(e){
    let that=this
    let token=wx.getStorageSync('token')
    e.detail.current.map(filePath=>{
      wx.uploadFile({
        filePath: filePath,
        name: 'file',
        // url: 'http://www.zy.com/api/upfile',
        url: `${http}upfile`,
        header:{token},
        success:res=>{
          let json=JSON.parse(res.data)
//文件追加数组
          this.data.goods_img.push(json.data)
          console.log(json.data);
        }
      })
    })
  },

  submit(event){
    console.log();
    if (!event.detail.isValidate) {
      return false
    }
      let desc=event.detail.desc
      let goods_attr=event.detail.values.goods_attr
      let goods_name=event.detail.values.goods_name
      let goods_type=event.detail.values.goods_type
      let goods_img=this.data.goods_img
      let token=wx.getStorageSync('token')
      wx.request({
        url: `${http}goods`,
        data:{desc,goods_attr,goods_name,goods_type,goods_img},
        method:"POST",
        header: {
          'content-type': 'application/json', // 默认值
          token
        },
        success:res=>{
          console.log(res);
          if (res.data.code == 200) {
            wx.showToast({
              title: '添加成功',
            })
          }else{
            wx.showToast({
              title: '添加失败',
            })
          }
        },
        fail:ret=>{
          wx.showToast({
            title: '系统错误',
          })
        }
      })
  },

laravel 控制器代码：

  public function upload(Request $request)
    {
        DB::beginTransaction();
        $file = $request->file('file');
//        百度云检测图片
        $res=(new BaiDuCkeck())->imageAudit($file);
            try {
                $res=Oss::oss($file);
                DB::commit();
//                返回上传之阿里云oss的图片链接
                return ['code'=>200,'msg'=>'ok','data'=>$res];
            }catch (\Exception $exception){
                DB::rollBack();
                return ['code'=>500,'msg'=>$exception->getMessage(),'data'=>[]];
            }

效果图：

方式2 ：简单实现

wxml

<l-form name="goods" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit"
>
<view>
  <l-image-picker size="4" bind:linchange="onChangeTap" />
</view>
<view slot="submit">
        <l-button>提交</l-button>
    </view>
</l-form>

wx.json

{
  "usingComponents": {
    "l-image-picker":"/miniprogram_npm/lin-ui/image-picker",
    "l-form":"/miniprogram_npm/lin-ui/form"
  }
}

wx.js

// liu ui 图片上传
    onChangeTap(evt) {
        evt.detail.current.map(filePath => {
            wx.uploadFile({
                filePath: filePath,
                name: 'file',
                url: 'http://www.yan.com/exam20/image',
                header: {
                    'Content-Type': 'multipart/form-data'
                  },
                success: res => {

                    let json = JSON.parse(res.data)
                    //文件追加数组
                     this.data.goods_img.push(json.data)

                }

            })

        });

    },

    submit(evt) {
        // 获取到文件传输的值
        let goods_img=this.data.goods_img
        // 将值添加入库即可

    },

laravel控制器：

/**
     * 接受微信小程序端传过来的图片
     */
    public function image(Request $request){
        $imgUrl=$request->file('file')->getPathname();
        //        验证图片链接
        $res=BaiduService::imageCheck($imgUrl);
        if ($res){
            //       阿里云文件上传
            $result=OssImageServerice::ossImage($imgUrl);
            return response()->json(['code'=>200,'message'=>'文件检测结果合规，文件已经上传至阿里云服务器','data'=>$result]);
        }else{
            return response()->json(['code'=>500,'message'=>'文件不合规，上传失败','data'=>'']);
        }

    }