https://github.com/telstatic/xayah
WEB文件管理器
https://github.com/telstatic/xayah
aliyun iview oss qiniu storage vue
Last synced: about 2 months ago
JSON representation
WEB文件管理器
- Host: GitHub
- URL: https://github.com/telstatic/xayah
- Owner: TELstatic
- License: mit
- Created: 2018-06-12T08:31:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T08:24:29.000Z (over 2 years ago)
- Last Synced: 2025-03-30T05:41:11.571Z (3 months ago)
- Topics: aliyun, iview, oss, qiniu, storage, vue
- Language: Vue
- Homepage:
- Size: 1000 KB
- Stars: 25
- Watchers: 2
- Forks: 5
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# xayah
> 阿里云上传配套组件(iView)
* [安装](#installation)
* [使用](#usage)
* [属性](#props)
* [事件](#events)
* [更新日志](#log)
### [安装](#installation)
npm install xayah
### [使用](#usage)
app.js
import iView from 'iview';
Vue.use(iView); //xayah 依赖iView 此代码必须
import 'iview/dist/styles/iview.css';
import xayah from 'xayah';
vue.use(xayah);
demo.vue
export default {
data() {
return {
images: [
{
url: ''
}
],
urls:{
index: '', //获取文件地址
upload: '', //上传地址
create: '', //创建目录地址
check: '', //检查文件唯一
policy: '', //获取上传策略地址
delete: '', //删除文件或目录地址
return: '', //本地回调地址
},
id:'editorImage',
max:5,
config:{
random:false,
size:0,
format:[
'jpg','png','jpeg'
],
style:'?x-oss-process=style/thumb',
key:'id',
gateway:'oss'
}
}
},
methods: {
callback(val){
console.log(val);
}
}
}
### [属性](#props)
| name | type |required |default|memo |
| ------- | ---- |-------- |------|-------|
| value | mixed | true | [] | 可以使用 v-model 双向绑定数据|
| urls.index | string | true | '' | 获取文件|
| urls.upload | string | true | '' | 上传地址|
| urls.alias | string | false | '' | 文件显示地址 或 自定义域名 (七牛上传地址与显示地址不一致问题) |
| urls.create | string | true | '' | 创建目录|
| urls.check | string | true | '' | 检查文件唯一|
| urls.policy | string | true | '' | 获取上传策略|
| urls.delete | string | true | '' | 删除文件或目录|
| urls.return | string | true | '' | 本地回调地址|
| id | string | false | null | Dom ID|
| max | int | false | 1 | 限制插入图片数量|
| simple | string | false | '' | 简单上传模式 默认上传目录 填写即为启用|
| type | string | false | 'object' | 默认返回类型 |
| config.random | bool | false | false | 使用随机文件名|
| config.size | int | false | 0 | 限制上传文件大小|
| config.format | array | false | ['jpg','png','jpeg'] | 限制上传文件格式|
| config.style | string | false | '' | 图片格式化 示例: ?x-oss-process=style/thumb|
| config.key | string | false | 'id' | 兼容 MongoDB |
| config.folder | bool | false | false | 是否允许上传目录 |
| config.gateway | string | false | 'oss' | 多网关 |
| config.resource | bool | false | false | 是否隐藏源码链接 |
| config.document | bool | false | false | 是否隐藏文档链接 |
| config.debug | bool | false | false | 是否开启调试功能 |
| config.strict | bool | false | false | 是否开启严格模式 |
| config.last | bool | false | false | 是否显示最新版本 |
| config.current | bool | false | false | 是否显示当前版本 |
| config.check | bool | false | false | 是否检查图片宽高 |
| config.formatValue | function | false | 详见代码 | 格式化 value 值 |
| config.formatReturn | function | false | 详见代码 | 格式化返回值 |
### [事件](#events)
| name | return |memo |
| --- | ----- | ------|
| callback | 形如:\[\{url:'//demo.oss.com/demo.jpg'\}\] | 返回选中的图片|
### 使用说明
配置ID说明
>用途:富文本编辑器插入图片
>示例:以quill富文本编辑器为例
demo.vue
export default {
data() {
return {
content:null,
images: [
{
url: ''
}
],
urls:{
index: '', //获取文件地址
upload: '', //上传地址
create: '', //创建目录地址
check: '', //检查文件唯一
policy: '', //获取上传策略地址
delete: '', //删除文件或目录地址
return: '', //本地回调地址
},
id:'editorImage',
max:5,
config:{
random:false,
size:0,
format:[
'jpg','png','jpeg'
],
key:'id',
style:'',
gateway:'oss'
}
}
},
mounted(){
this.initEditor();
},
methods: {
callback(val){
console.log(val);
let that=this;
$.each(res, function (index, value, array) {
that.$refs.myQuillEditor.quill.insertEmbed(10, 'image', value.url);
});
},
imageHandler() {
document.getElementById('editorImage').click();
},
initEditor(){
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imageHandler);
}
}
}
### 配套后台
https://github.com/TELstatic/rakan
https://kodos.cn
### TODO
1. 优化样式,去除内联样式
### Buy me a coffee
> Liked some of my work? Buy me a coffee (or more likely a beer)
### 代码贡献
如果您有其它需求，或者发现本项目中需要改进的代码，欢迎 Fork 并提交 PR！