小程序添加、oss上传加水印

HTML页面

<view class="container">
  <view class="page-body">

    <form catchsubmit="formSubmit" catchreset="formReset">

      <view class="page-section">
        <view class="page-section-title">姓名</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" name="name" placeholder="这是一个输入框" />
            </view>
          </view>
        </view>
      </view>

      <view class="page-section">
        <view class="page-section-title">年龄</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" name="age" placeholder="这是一个输入框" />
            </view>
          </view>
        </view>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">性别</view>
        <radio-group name="sex">
          <label><radio value="男"/>男</label>
          <label><radio value="女"/>女</label>
        </radio-group>
      </view>


        <button size="mini" bindtap="bindUploadTap">
        选择图片
        </button>
        <image src="{{imgsrc}}"></image>
        <input hidden="true" name="image" value="{{images}}"/>


      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
      </view>
    </form>
  </view>

</view>

js代码块

//表单添加
  formSubmit(e) {
     //console.log(e.detail.value.image)
    // console.log(e.detail.value.sex)
    // console.log(e.detail.value.age)
    var name = e.detail.value.name;
    var sex = e.detail.value.sex;
    var age = e.detail.value.age;
    var image = e.detail.value.image;
    wx.request({
      url: 'http://day518.homework.com/api/insert', //仅为示例，并非真实的接口地址
      data: {
       name:name,
       sex:sex,
       age:age,
       image:image
      },
      // method:"POST",
      // header: {
      //   'content-type': 'aapplication/x-www-form-urlencoded' // 默认值
      // },
      success (res) {
        console.log(res.data)
      }
    })
  },

  //获取图片，并将图片添加到表单中通过隐藏域一起提交
bindUploadTap:function(){
  let _this = this
  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths
      _this.setData({
        imgsrc: tempFilePaths[0]
      })
      wx.uploadFile({
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        url: 'http://day518.homework.com/api/upload_img', //仅为示例，非真实的接口地址
        method:"post",
        filePath: tempFilePaths[0],
        name: 'image',
        formData: {
          'user': 'test'
        },
        success: function (res) {
          var data = res.data
          //console.log(res.data)
          var images=res.data;
          _this.setData({images})
        }
      })
    }
  })
},

下载阿里云SDK

composer require aliyuncs/oss-sdk-php

下载image类库文件

composer require intervention/image

引入库

use OSS\OssClient;//引入阿里云OSS云存储
use OSS\Core\OssException;//引入阿里云OSS云存储异常机制
use OSS\Model\RefererConfig;//引入阿里云防盗链
use Intervention\Image\Facades\Image;//引入Intervention  Image类库

## 定义路由

## 添加数据和图片

 //小程序添加
    public function insert(Request $request)
    {
        //接收数据
        $param=$request->all();
        //print_r($param);die();
        //验证
        $validator = Validator::make($request->all(), [
            'name' => 'required',
            'sex' => 'required',
            'age' => 'required',
//            'image'=>'required'
        ]);
        if ($validator->fails()) {
            return ['code'=>500,'data'=>'','msg'=>'所填信息不能为空'];
        }
            //添加
            $res=Students::create($param);
            if ($res){
                return ['code'=>200,'data'=>$res,'msg'=>'添加成功'];
            }else{
                return ['code'=>500,'data'=>'','msg'=>'添加失败'];
            }
    }

    //小程序添加
    public function upload_img(Request $request)
    {
        //获取文件上传的路径
        $file=$request->file('image')->store('','image');
        //引用系统字体文件
        $fontPath=public_path('STKAITI.TTF');
        //调用Intervention Image类库进行制作缩略图并添加文字水印操作（可以使用链式操作多级处理）
        //fit()自适应图片大小   text()水印文字 样式    使用use引入$fontPath（字体）
        Image::make("./upload/".$file)
            ->fit(300,300)
            ->text('抽奖',135,135,function ($font)use ($fontPath){
                $font->file($fontPath)
                    ->size(20)//字体大小
                    ->color('#000')//字体颜色(支持十六进制颜色码)
                    ->valign('center');//对齐方式
            })->save("./upload/".$file);//覆盖原文件
        // 阿里云AccessKey和AccessKeySecret
        $accessKeyId = "LTAI5t5s5FJEdqgbEtVikhw1";
        $accessKeySecret = "5hRfEbliZN6mIFQjctJlSj8A82YsW5";
        // Endpoint为上海，其它Region请按实际运营情况填写。
        $endpoint = "http://oss-cn-shanghai.aliyuncs.com";
        // 设置存储空间名称。
        $bucket= "aliqiang";
        // 设置文件名称。
        $object = time().'.jpg';
        //实例化阿里云防盗链基类
        $refererConfig = new RefererConfig();
        // 设置允许空Referer（防盗链可以为空）。
        $refererConfig->setAllowEmptyReferer(true);
        //如文件无法预览，说明Bucket设置了 Referer（防盗链设置成功）
        //建议在Refere白名单中加上 *.console.aliyun.com。
        // 添加Referer白名单。Referer参数支持通配符星号（*）和问号（？）。
        //替换成*.console.aliyun.com 图片可以正常预览
        $refererConfig->addReferer("*.console.aliyun.com");
        //可以设置多个防盗链
        $refererConfig->addReferer("www.aliiyuncs.com");
        //使用错误抛出机制
        try{
            //阿里云OSS云存储
            $ossClient = new OssClient($accessKeyId,$accessKeySecret, $endpoint);
            //注意文件上传的路径  需要public_path()定位上传的文件的路径 相对路径可能会失效
          $ossClient->uploadFile($bucket, $object, public_path("/upload/".$file));
            //给对应的空间名称配置防盗链并推送到云端配置
            $ossClient->putBucketReferer($bucket, $refererConfig);
            $urlPath="http://day518.homework.com/upload/".$file;
            return $urlPath;
//            $res=Students::create($urlPath);
//            if ($res){
//                return ['code'=>200,'data'=>$urlPath,'msg'=>'添加成功'];
//            }else{
//                return ['code'=>500,'data'=>'','msg'=>'添加失败'];
//            }
        } catch(OssException $e) {
            printf(__FUNCTION__ . ": FAILED\n");
            printf($e->getMessage() . "\n");
            return;
        }
        //print(__FUNCTION__ . ": OK" . "\n");
        //return ['code'=>200,'data'=>$file,'msg'=>'上传成功'];
    }