README

上传文件至阿里云OSS组件

安装

composer require quansitech/qscmf-formitem-aliyun-oss

如何使用

修改.env，设置相关配置

ALIOSS_ACCESS_KEY_ID=**********
ALIOSS_ACCESS_KEY_SECRET=**********
ALIOSS_HOST=**********

修改/app/Common/Conf/config.php，配置对应上传类型，如：
```
//UPLOAD_TYPE_*** 其中***为对应的type
```

'UPLOAD_TYPE_FILE' => array(
 'mimes' => '', //允许上传的文件MiMe类型
 'maxSize' => 500*1024*1024, //上传的文件大小限制 (0-不做限制)
 'exts' => 'doc,docx,xls,xlsx,pdf,ppt,txt,rar,pptx,rtf,zip,7z,jpg,png', //允许上传的文件后缀
 'autoSub' => true, //自动子目录保存文件
 'subName' => array('date','Ymd'), //子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
 'rootPath' => './Uploads/', //保存根路径
 'savePath' => 'file/', //保存路径
 'saveName' => array('uniqid', ''), //上传文件命名规则，[0]-函数名，[1]-参数，多个参数使用数组
 'saveExt' => '', //文件保存后缀，空则使用原后缀
 'replace' => false, //存在同名是否覆盖
 'hash' => true, //是否生成hash编码
 'callback' => false, //检测文件是否存在回调函数，如果存在返回文件信息数组
 'oss_host' => env('ALIOSS_HOST'), // oss地址，如果不指定upload_oss_host，该地址会作为上传地址和资源访问地址
 'upload_oss_host' => env("UPLOAD_ALIOSS_HOST"), // 指定上传的oss地址,不指定的话会使用oss_host作为上传地址
 'oss_meta' => array('Cache-Control' => 'max-age=2592000', 'Content-Disposition' => 'attachment'),
),

Ps. 其中oss_meta支持设置变量替换，如：希望下载oss文件时，可以使用原来的文件名称进行下载（上传到oss后真实文件名会变成随机码）, 在filename=后面加上"__title__"，程序会自动替换成真实的文件名, 代码如下

'oss_meta' => array('Cache-Control' => 'max-age=2592000', 'Content-Disposition' => 'attachment; filename=__title__''),

+ 使用 
  + 上传音频：audio_oss/audios_oss

  ```php
  // audio_oss为上传单个音频，audios_oss为上传多个音频

  $extra_attr = 'data-url='.U('/extends/AliyunOss/policyGet', array('type' => 'audio')); // 默认值
  // 如没有特别需求，$extra_attr可不传
  addFormItem('audio_id', 'audio_oss', '单个音频', '', '', '', $extra_attr)
  addFormItem('audios_id', 'audios_oss', '多个音频')

上传文件：file_oss/files_oss

// file_oss为上传单个文件，files_oss为上传多个文件

$extra_attr = 'data-url='.U('/extends/AliyunOss/policyGet', array('type' => 'file')); // 默认值
// 如没有特别需求，$extra_attr可不传
addFormItem('file_id', 'file_oss', '单个文件', '', '', '', $extra_attr)
addFormItem('files_id', 'files_oss', '多个文件')

上传图片：picture_oss/pictures_oss

// picture_oss为上传单张图片，pictures_oss为上传多张图片

$extra_attr = 'data-url='.U('/extends/AliyunOss/policyGet', array('type' => 'image')); // 默认值
// 如没有特别需求，$extra_attr可不传
addFormItem('picture_id', 'picture_oss', '单张图片', '', '', '', $extra_attr)
addFormItem('pictures_id', 'pictures_oss', '多张图片')

$options = ['process'=>'?x-oss-process=image/resize,m_fill,w_300,h_200'] //其中w_300,h_200为参数宽300高200，请根据实际需求填写
// 如表单没有显示缩略图需求，$options可以不传，$options为空时显示原图
addFormItem('picture_id', 'picture_oss', '单张图片', '',$options , '', '')

上传裁剪后的图片：picture_oss_intercept/pictures_oss_intercept

// picture_oss_intercept为上传单张裁剪后的图片，pictures_oss_intercept为上传多张裁剪后的图片

$option = [
  'type' => 'image', // 默认值
  'width' => 1, // 裁剪框宽高比例，此为宽度，默认为1
  'height' => 1 // 裁剪框宽高比例，此为高度，默认1
];

// 如没有特别需求，$option可不传
addFormItem('cover', 'picture_oss_intercept', '单张裁剪后的图片', '', $option)
addFormItem('covers', 'pictures_oss_intercept', '多张裁剪后的图片')

oss_uploader oss上传图片

介绍

图片裁剪上传功能,内置cropper.js,可配置是否裁剪,可配置oss。

功能：

可配置使用oss
可配置是否裁剪
可以定义裁剪尺寸,裁剪比例
可以定义限制文件后缀、大小以及是否允许选取重复文件
限制上传张数
可自定义提示函数

裁剪上传图会默认转成jpg;png透明背景默认转成白色

初始化调用

$(selector).ossuploader(option); //selector 为隐藏域

option: {
  url:                //string require  上传图片的地址
  multi_selection:    //boolean optional 是否多选
  oss:                //boolean optional 是否启用oss
  canvasOption:{       //object optional 配置getCroppedCanvas
      //修改裁剪后图片的背景色 为黑色
      fillColor: '#333',
  } 
  //get more information: https://github.com/fengyuanchen/cropperjs

  crop:{              //object optional cropper配置,若存在此项，则裁剪图片,更多配置请参考cropper.js官网
      aspectRatio: 120/120,
      viewMode: 1,
      ready: function () { 
          croppable = true;
      }
  },
  //由于plup_upload内置的filter,出错时会触发Error回调
  //导致上一个上传任务的失败,自定义了 check_image,limit_file_size,用于前端验证文件后缀格式与文件大小
  filters: {                // object optional
       check_image:         // Boolean 是否检查图片类型(若为true: 对于裁剪上传,允许无后缀文件;多选上传,不允许无后缀文件)
       limit_file_size:     // Number 限制文件大小，参考格式：5 * 1024 * 1024
       prevent_duplicates:  // Boolean 是否允许选取重复文件，false：是，true 否，默认为false
  },
  show_msg:           //function optional 展示提示消息的函数,默认为window.alert
  limit:              //number   optional 上传图片张数的限制,默认值32
  tpye:               //string   optional 上传类型 file | image 默认值 image
  beforeUpload:       //function optional 回调 参考回调说明
  filePerUploaded:    //function optional 回调 参考回调说明
  uploadCompleted:    //function optional 回调 参考回调说明
  uploadError:        //function optional 回调 参考回调说明
  deleteFile:         //function optional 回调 参考回调说明
}

备注:

cropper：
- 官网demo
- github
回调说明:
- beforeUpload : 当选中文件时的回调。若返回false,则不添加选中的文件
- filePerUploaded : 每个文件上传完成，都会触发此回调
- uploadCompleted : 若多选上传选中3个图，则3个图完成上传才触发此回调
- uploadError : 上传出错
- deleteFile : 删除图片
oss_upload_extend oss上传扩展

介绍

基于oss上传插件，对上传插件的回调进行扩展，增强oss插件上传功能

功能：

可以组合添加拓展
可以对扩展进行排序
内置preventUpload扩展
根据oss_upload的回调,添加各自的回调

初始化调用

$(selector).ossuploaderWrapper(option[, extend]); //selector 为隐藏域
option: object require 原oss上传插件的option
extend: string_array optional 扩展名

链接：

oss_uploader
扩展名: 扩展介绍

扩展说明

执行逻辑

根据传入的extend进行排序
把extend遍历,从conf中取出要扩展的配置
把配置中的回调放到相应的队列中
当触发相应的回调,则执行相应队列中的函数
若队列中有函数返回false,则队列后面的函数都不执行

内置扩展介绍

preventUpload(默认扩展)

上传图片的过程中,隐藏域所在的form
会禁止submit事件(submit事件禁止且提示图片上传中)

type为submit 的按钮会显示为上传中，当上传完成会恢复原来的描述

$(selector).ossuploaderWrapper(option, ['preventUpload']); //selector 为隐藏域

添加自定义扩展

conf 对象内置了preventUpload扩展

往conf对象加属性对象，实现扩展的功能

var conf = {
  myExtend: {
      invoke: function(){
              return {};
          } || {} //require
      order: number, // >=2,optional
  }
};

invoke 属性必须为返回对象的函数或纯对象
返回对象或纯对象属性包含回调,如 beforeUpload,uploadCompleted 等扩展的回调队列中，任意一个函数返回false,都会停止执行后续回调
order属性为插件的调用排序,值越小调用顺序越早;
由于preventUpload扩展(内置扩展)的order为 1,
其他默认内置扩展大于1，非默认内置扩展大于100。

quansitech / qscmf-formitem-aliyun-oss

Maintainers

Details

README

安装

如何使用

oss_uploader oss上传图片

介绍

功能：

初始化调用

oss_upload_extend oss上传扩展

介绍

功能：

初始化调用

扩展说明

执行逻辑

内置扩展介绍

preventUpload(默认扩展)

添加自定义扩展