Skip to content
layui的阿里文件上传组件模块
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples 修复无文件时的BUG Apr 12, 2019
src
README.md 修改md Apr 9, 2019

README.md

朋友的项目中要用到layui上传至阿里云OSS,自己花了一个晚上的时候.写了一个组件.直接直传的.但是appid与appkey都暴露在了前端.这样很不合适,所以后来又花了一个晚上将这个组件完善,但是获取签名需要后端配合,前端只去请求获取签名的接口,废话不多说,先看效果图:
image 插件分为单个文件上传与多个文件上传.成功与失败后,都有回调.大家在回调中对返回的url做操作即可
插件已经上传至github,地址为https://github.com/xieyushi/layui-aliossUploader
下面就直接说下这个插件的基本用法与配置吧:
模块化这个就不再介绍.相信用过layui的都知道了.关键代码是下图中的这一段:
image
所有的配置字段都在这张图中了

属性名称 作用 是否必填 默认值
elm 绑定按钮的jq选择器
fileType 指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频) 'file'
multiple 是否多文件上传 false
layerArea 多文件上传打开的弹窗的大小 'auto'
layerTitle 上传多文件弹窗标题 上传文件到阿里云OSS
policyUrl 请求签名的url
policyData 请求签名的参数 {}
policyHeader 请求签名的headers {}
codeField 请求签名返回的状态码字段 'code'
codeStatus 请求签名返回的成功状态码值 0
policyMethod 请求签名的方法 'GET'
accessidFiled 返回签名的accessid字段名称 'accessid'
policyFiled 返回签名的policy字段名称 'policy'
signatureFiled 返回签名的signature字段名称 'signature'
httpStr 上传至OSS时是否https 'https'
region OSS的数据中心所在的地域
bucket OSS的存储空间命名
prefixPath 上传多文件的前缀(相当于文件夹,可写多级,但不能以/开头必须以/结尾,如'aaa/bbb/'') ''
allUploaded 文件上传成功后的回调(多文件为所有文件上传完成后的回调)
allUploaded-res allUploaded回调参数中的res结构为:{name:文件名称,type:文件类型,ossUrl:上传成功后的文件请求url(形状与上面的httpStr参数一致)}
policyFailed 请求policy失败后的回调
uploadRenderData 支持部分layui的upload的参数配置 {}

uploadRenderData的参数配置功能大致如下(并未测试,目前只是肓敲代码...)
image
参数解读就这么多了.不过插件也并完全完善,中间也有一些不足:
1.文件上传至阿里云的名称,采用了随机命名:prefixPath + new Date().getTime() + '-' + (Math.random() + "").substring(2, 7) + '-' + file.name,如果有朋友不想这样的.请自行修改源码.
2.uploadRenderData的参数并没有做太多的测试,可能有bug...
3.签名的请求实在是没办法由前端来完成.我虽然做了一个纯前端的,但是真的不推荐,这里我在github上上传了一个json文件,里面是和这个插件匹配的返回数据结构展示,大致如下:

{
	"code": 0,
	"success": true,
	"msg": "签名成功",
	"data": {
		"accessid": "XXXXX",
		"host": "http://XXXXX.oss-cn-shanghai.aliyuncs.com",
		"policy": "XXXX==",
		"signature": "XXXX=",
		"expire": 1554851252
	}
}

前端请将这个数组结构交给后台程序员来配合做签名.

使用此插件还需要注意的是需要配置阿里oss的跨域,设置post可进行跨域访问,不然图片上传是不会成功的.
使用此插件还需要注意的是需要配置阿里oss的跨域,设置post可进行跨域访问,不然图片上传是不会成功的.
使用此插件还需要注意的是需要配置阿里oss的跨域,设置post可进行跨域访问,不然图片上传是不会成功的.
重要的事情说三遍,暂时就这么多.

You can’t perform that action at this time.