美文网首页
小程序文件上传(后端php Laravel5.6)

小程序文件上传(后端php Laravel5.6)

作者: Lawliet_cxy | 来源:发表于2019-07-19 16:21 被阅读0次

我用的是支付宝小程序,其实也和微信小程序差不多,如果是微信小程序的话,改一点点就可以了。


小程序端代码

前端部分

页面:

<!-- .axml文件 -->
<button onTap="uploadPhoto" size="default" type="primary">上传测试</button>

方法:

//.js文件
uploadPhoto() {
      dd.chooseImage({
        success: (res) =>  {
          // console.log(res);
          const tempFilePaths = res.apFilePaths;
          dd.uploadFile({
            /**
             * @param string url:要上传的服务器api接口,填你自己的
             * @param string filePath:上传文件的定位符,记得加上下标
             * @param string fileName:文件name值,后端接收的时候要用到,不是文件名!!!
             * @param string fileType:文件类型
             * @param object header:HTTP请求header
             * @param function success:请求成功后执行的方法
             * @param function fail:请求失败后执行的方法
             */
            url: 'http://www.xiaomaiquan.com/api/circleImage/upload',//这里填你自己的服务端api
            filePath: tempFilePaths[0],
            fileName: 'file',
            fileType: 'image',
            header: {
              'content-type': 'multipart/form'
            },
            success: (res) => {
              dd.alert({
                content: '上传成功'
              }),
              console.log(res);
            },
            fail: (res) => {
              dd.alert({
                content: '上传失败111'
              }),
              // console.log(tempFilePaths[0])
              console.log('失败', res)
            }
          })
        }
      })
    }
  • 上面的方法只能上传一张图片,如果要上传多张图片:
//多张图片上传,将方法执行写到for循环里面即可,循环次数为图片数组的长度
chooseImage() {
    dd.chooseImage({
      count: 9,
      success: (res) => {
        // console.log(this.data.id);
        const tempFilePaths = res.apFilePaths;
        var postId = this.data.id;
        for(var i=0, h=tempFilePaths.length; i<h; i++){
            dd.uploadFile({
              /**
               * @param string url:要上传的服务器api接口,填你自己的
               * @param string filePath:上传文件的定位符,记得加上下标
               * @param string fileName:文件name值,后端接收的时候要用到,不是文件名!!!
               * @param string fileType:文件类型
               * @param object header:HTTP请求header
               * @param function success:请求成功后执行的方法
               * @param function fail:请求失败后执行的方法
               */
              url: `http://www.xiaomaiquan.com/api/circleImage/upload/${postId}`,
              filePath: tempFilePaths[i],
              fileName: 'image',
              fileType: 'image',
              header: {
                'content-type': 'multipart/form'
              },
              success: (res) => {
                //成功后返回主页
                dd.navigateTo({
                  url: '../../../index/index'
                })
                // dd.alert({
                //   content: '上传图片成功'
                // }),
                // console.log(res);
              },
              fail: (res) => {
                dd.alert({
                  content: '上传图片失败'
                })
                console.log('失败:',res);
              }
          })
        }
      }
    })
  }

后端部分

public function uploadImage(array $data){
        //获取文件name值
        $file = $data['file'];
        if($file->isValid()){
            $ext = $file->getClientOriginalExtension();
            $file_name = date("YmdHis", time()).'-'.uniqid().'.'.$ext;
            if(!in_array($ext, ['jpg', 'png', 'jpeg', 'gif'])) return response()->json(err('文件类型不是图片'));
            //记得创一个文件夹放文件,我的是circle_post_img
            $path = public_path().DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR.'circle_post_img'.DIRECTORY_SEPARATOR.date('Y').DIRECTORY_SEPARATOR.date('m').DIRECTORY_SEPARATOR.date('d').DIRECTORY_SEPARATOR;
            $bool =  $file->move($path,$file_name);
            if($bool){
                $img_path = '/uploads/circle_post_img/'.date('Y').'/'.date('m').'/'.date('d').'/'.$file_name;
                $data = [
//                    'domain_img_path'=>get_domain().$img_path,
                    'img_path'=>$img_path,
                ];
                //返回图片路径
                return $data;
            }else{
                return '获取图片路径失败';
            }
        }else{
            return '图片上传失败';
        }
    }

效果如下




成功返回数据,这个时候可以可以根据返回数据来进行显示图片之类的操作了

相关文章

网友评论

      本文标题:小程序文件上传(后端php Laravel5.6)

      本文链接:https://www.haomeiwen.com/subject/qzdslctx.html