微信小程序实现图片上传

图片上传与表单内容提交时异步执行，图片先行长传，然后点击提交时表单的内容才执行添加（图片上传是会生成一个id，这是应将id存入缓存中，等表单内容提交时执行一个修改的操作将表单内容保存）

一、文件上传部分（图片）

wxml代码部分：

<view class="view">
    <form catchsubmit="formSubmit">
        <text>商品名称：</text>
        <input type="text" name="goodsname" class="input" />
        <text>商品价格：</text>
        <input type="text" name="price" class="input" />
        <text>上传图片</text>
        <view>
            <button bindtap="uploadimg">点击选择上传图</button>
        </view>
        <image src='{{source}}' style='width:600rpx; height:600rpx' />
        <view class="but">
            <button style="margin: 30rpx 0" type="primary" formType="submit" >添加</button>
        </view>
    </form>
</view>

js代码部分

uploadimg: function () {
    var that = this;
    wx.chooseImage({  //从本地相册选择图片或使用相机拍照
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

      success: function (res) {
        //console.log(res)
        //前台显示
        that.setData({
          source: res.tempFilePaths
        })

        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'http://www.xxxxx.com/index.php/wxxcx/xxxx/uploadimg',
          filePath: tempFilePaths[0],
          name: 'file',
          success: function (res) {
            //打印
            console.log(res.data)
          }
        })

      }
    })
  },

后端控制器

//图片上传
    public function uploadimg()
    {
        $file = request()->file('file');
        if ($file) {
            $info = $file->move('uploads/weixin/');
            if ($info) {
                $file = $info->getSaveName();
                //入库时应将完整的路径入库 方便展示用
                $file="E:."/".xxxx."/".public."/".uploads."/".weixin"."/".$file;
                $data= \app\wxxcx\model\Pyg::create(['image'=>$file],true)->toArray();
                //将商品id存入缓存
                cache('gid',$data['gid']);
                print_r( $data);
                $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file];
                return json($res);
            }
        }

    }

第二步：图片上传完成后表单数据添加部分

js代码部分：

 Page({
 
   /**
     * 页面的初始数据
     */
    data: {
  
    },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
 
  },
   formSubmit(e) {
     //接受表单提交的数据
     let goodsname = e.detail.value.goodsname
     let price = e.detail.value.price
     //发送请求
     wx.request({
       url: 'http://www.xxxx.com/index.php/wxxcx/xxx/index', //的接口地址
       data: {
         goodsname: goodsname,
         price: price
       },
       dataType: "json",
       method: "POST",
       responseType: "text",
       header: {
         'content-type': 'application/json' // 默认值
       },
 
      success(res) {
         let gid = res.data.data.gid
         console.log(res.data.data.gid)
         //判断是否添加成功
         if (res.data.code == 200) {
           //将商品id存入缓存 （可不写）
           wx.setStorage({
             key: "gid",
             data: gid
           })
         }
         //添加完页面跳转到展示页面
         wx.switchTab({
           url: '/pages/demo2/demo2'
         })
       }
     })
 
     console.log(e.detail.value)
     console.log(goodsname)
  },
 
   //图片上传部分
   uploadimg: function () {
     var that = this;
     wx.chooseImage({  //从本地相册选择图片或使用相机拍照
       count: 1, // 默认9
       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

       success: function (res) {
         //console.log(res)
         //前台显示
         that.setData({
           source: res.tempFilePaths
         })
 
         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
         var tempFilePaths = res.tempFilePaths
         wx.uploadFile({
           url: 'http://www.xxx.com/index.php/wxxcx/xxx/uploadimg',
           filePath: tempFilePaths[0],
          name: 'file',
          success: function (res) {
             //打印
            console.log(res.data)
           }
         })
 
       }
     })
   },
 })

//保存数据  添加
    public function index()
    {
       $data = input();
       //从缓存中获取商品id
       $gid = cache('gid');
       \app\wxxcx\model\xxx::update($data,['gid'=>$gid],true)->toArray();
       $data = \app\wxxcx\model\xxx::get($gid);
       if ($data){
           return json(['code'=>200,'msg'=>'success','data'=>$data]);
       }
    }

注：因为采取异步上传，图片先保存到数据库后表单内容才提交保存在数据库，所以图片上传后要将添加的id存入缓存当中，表单提交后要从缓存中将id取出，执行修改的操作将数据添加入库