309 lines
9.7 KiB
Vue
309 lines
9.7 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-upload组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">多文件上传选择器</view>
|
||
<view class="content">
|
||
自由指定文件来源拍摄、相册、会话。<br/>
|
||
支持文件大小限制、尺寸压缩、水印、指定云、指定API。<br />
|
||
</view>
|
||
</view>
|
||
<form @submit="submitlog">
|
||
<view class="ciy-form">
|
||
<label>v-model绑定</label>
|
||
<view>
|
||
<ciy-upload v-model="formvalue" path="demo" num="5" name="ciy1" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>value绑定</label>
|
||
<view>
|
||
<ciy-upload left :value="formvalue" path="demo" name="ciy2" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>只能拍照</label>
|
||
<view>
|
||
<ciy-upload name="ciy3" path="demo" num="9" imgwidth="1000" sourcetype="camera" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>上传文档</label>
|
||
<view>
|
||
<ciy-upload name="ciy4" path="demo" num="20" filetype="all" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>方形头像</label>
|
||
<view>
|
||
<ciy-upload name="ciy5" path="demo" showwh="100%" imgwidth="1000" imgheight="1000" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>限制大小</label>
|
||
<view>
|
||
<ciy-upload name="ciy6" path="demo" maxkb="200" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>图像压缩</label>
|
||
<view>
|
||
<ciy-upload name="ciy7" path="demo" zipjpg="60" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>右下文字</label>
|
||
<view>
|
||
<ciy-upload name="ciy8" path="demo" zipjpg="60" watertext="水电费|第二行" waterfont="36px Arial" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>满屏水印</label>
|
||
<view>
|
||
<ciy-upload name="ciy9" path="demo" zipjpg="60" watertext="众产(杭州)科技有限公司" waterfont="36px Arial" watertype="full" waterpadding="10" waterangle="20" wateralpha="0.8" watercolors="#ff0000,#00ff00" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>上传到云</label>
|
||
<view>
|
||
<ciy-upload name="ciy10" path="demo" stor="A" zipjpg="60" imgwidth="1000" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>SaaS上传</label>
|
||
<view>
|
||
<ciy-upload left name="ciy11" saas="s10224" path="demo" stor="/" zipjpg="60" imgwidth="1000" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>固定比例拍照</label>
|
||
<view>
|
||
<ciy-upload name="ciy12" path="demo" cammaskpng="/img/maskcamera.png" camheight="70" imgwidth="1000" sourcetype="rehcam" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>自定比例拍照</label>
|
||
<view>
|
||
<ciy-upload name="ciy13" path="demo" imgwidth="1000" sourcetype="rehcam,album" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>禁用</label>
|
||
<view>
|
||
<ciy-upload name="ciy14" disabled :value="formvalue" @change="chglog('change', $event)"></ciy-upload>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="txt-center px4 py4">
|
||
<button class="btn" form-type="submit">提交表单</button>
|
||
<button class="btn" @tap="formvalue='/img/face.png'">改变值</button>
|
||
</view>
|
||
<view class="ciy-card formcard" v-if="formdata">
|
||
<view class="content">
|
||
<view v-html="tobr(formdata, true)" class="formdata"></view>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">name,value,v-model</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">disabled</view>
|
||
<view class="tip">
|
||
禁止选择。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">initevent</view>
|
||
<view class="tip">
|
||
是否产生初始事件。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">left</view>
|
||
<view class="tip">
|
||
是否左侧显示。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">action</view>
|
||
<view class="tip">
|
||
http开头，指向绝对API。<br />
|
||
upload类路径[.微服务码]，指向本服务器API。<br />
|
||
jsnurl + 'z/?func=' + upload类路径 + '/upload.';
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">sourcetype</view>
|
||
<view class="tip">
|
||
文件选择来源，多个用逗号分隔。<br />
|
||
单个直接触发，多个出现上滑菜单。<br />
|
||
camera 拍摄<br />
|
||
album 从相册选择<br />
|
||
message 从会话选择<br />
|
||
rehcam 比例相机。<br />
|
||
默认 camera,album,message
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">camheight</view>
|
||
<view class="tip">
|
||
{比例相机} 设置固定高度，使用vw单位。<br />
|
||
如果为空，则出现各种比例高度的选择功能，按name缓存高度。<br />
|
||
如果设置数字，则固定高度，无选择功能。<br />
|
||
默认 空
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">cammaskpng</view>
|
||
<view class="tip">
|
||
{比例相机} 蒙版png图片。
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">filetype,ext</view>
|
||
<view class="tip">
|
||
上传文件类型，all全部，image图片，video视频。<br />
|
||
如果是message上传方式，ext，可指定扩展名，逗号分隔。<br />
|
||
默认 image
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">num</view>
|
||
<view class="tip">
|
||
上传文件最多数量。<br />
|
||
默认 1
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">stor</view>
|
||
<view class="tip">
|
||
指定存储服务器，指向位置在app.vue的storlist中配置。<br />
|
||
默认 / 本地服务器
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">imgwidth, imgheight</view>
|
||
<view class="tip">
|
||
指定图片尺寸宽高，二选一为等比例缩放，两个都设置不等比例缩放。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">maxkb</view>
|
||
<view class="tip">
|
||
最大可上传文件尺寸，单位KB。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">zipjpg</view>
|
||
<view class="tip">
|
||
图片压缩、水印、截取时，jpg压缩比，0-1。<br />
|
||
默认 0.7
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">waterfont</view>
|
||
<view class="tip">
|
||
水印文字字体字号。<br />
|
||
默认 28px Arial
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">watertext</view>
|
||
<view class="tip">
|
||
水印文字，可用竖线换行。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">watertype</view>
|
||
<view class="tip">
|
||
水印类型，支持左下角、full 满屏文字水印。<br />
|
||
默认 空 (左下角多行文字)
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">watercolors</view>
|
||
<view class="tip">
|
||
水印颜色，多个用小写,分隔。<br />
|
||
左下角，第一个颜色是主色，第二个是边框色。<br />
|
||
满屏文字，多色随机选择。<br />
|
||
默认 白,黑
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">wateralpha</view>
|
||
<view class="tip">
|
||
水印透明度。<br />
|
||
默认 full 0.1，左下角1
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">waterpadding</view>
|
||
<view class="tip">
|
||
{full满屏专用} 水印间距。<br />
|
||
默认 30
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">waterangle</view>
|
||
<view class="tip">
|
||
{full满屏专用} 水印角度，自动随机+5度。<br />
|
||
默认 -20
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">showwh</view>
|
||
<view class="tip">
|
||
已上传图片显示宽度。<br />
|
||
默认 4em
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">path</view>
|
||
<view class="tip">
|
||
存入/ud/YYYY/MMDD/[path]。<br />
|
||
如果saas>0，则存入<br/>
|
||
/ud/字母1000/00/YYYY/MMDD/[path]。<br/>
|
||
例如s1013，存入/ud/s1/13/Y/MD/[path]<br/>
|
||
默认 nopath
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">saas</view>
|
||
<view class="tip">
|
||
存入独立用户空间目录，例 S394。<br />
|
||
一位字母+用户saasID<br/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@change, update:modelValue</view>
|
||
<view class="tip">
|
||
数值变更事件<br />
|
||
from: init,del<br/>
|
||
rehcam,camera,album,message,h5<br/>
|
||
toleft,toright
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
formvalue: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getauth();
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script>
|