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

本文主要是介绍小程序添加、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 = thiswx.chooseImage({count: 1, // 默认9sizeType: ['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'=>'上传成功'];}