|
|
<template>
|
|
|
<div style="margin: 1rem;">
|
|
|
<el-tabs type="border-card">
|
|
|
|
|
|
|
|
|
<el-tab-pane label="图片上传组件">
|
|
|
<div style="padding: 1rem;">
|
|
|
<div>
|
|
|
图片上传组件说明：
|
|
|
<ol style="font-size: .8rem; line-height: 1.8;">
|
|
|
<li>基础用法： <w-image-uploader v-model="value" :getUploadKey="getUploadKey" max="1"
|
|
|
v-model:uploading="uploading" /></li>
|
|
|
<li>属性（getUploadKey）：获取上传凭证的方法，需要使用者提供，开发模式下提供:<br />
|
|
|
前端示例<br />
|
|
|
<pre class="code">
|
|
|
const getUploadKey =async () => {
|
|
|
let r = await request.get("/file/upload/getUploadKey")
|
|
|
return r.data
|
|
|
} </pre>
|
|
|
后端示例<br />
|
|
|
<pre class="code"> @GetMapping("getUploadKey")
|
|
|
public R getUploadKey() {
|
|
|
return R.ok().setData(FileUtils.getUploadKey());
|
|
|
}</pre>
|
|
|
|
|
|
</li>
|
|
|
<li>属性（v-model）：双向绑定上传的文件URL,max=1是类型为String,否则为Array</li>
|
|
|
<li>属性（v-model:uploading）：双向绑定是否上传中,PS: 上传完成后才允许业务表单提交</li>
|
|
|
<li>属性（max）：允许上传的文件数量，0表示没有限制,默认：0</li>
|
|
|
<li>属性（prefix）：上传路径前缀，默认：default</li>
|
|
|
<li>属性（disabled）：禁止上传（图片预览模式）， 默认：false</li>
|
|
|
<li>属性（text）：按钮文字，默认：上传图片</li>
|
|
|
<li>属性（maxSize）：允许上传的文件最大大小,0表示不限制，默认：0</li>
|
|
|
<li>属性（threadNum）：并行上传数量：默认：2</li>
|
|
|
<li>属性（retry）：重试次数，默认：3 </li>
|
|
|
<li>属性（saveSrc）：是否保存图片原文件，如果true，则下载时下载原图zip文件，否则下载大图片，默认：false </li>
|
|
|
<li>属性（saveMin）：是否保存缩略图，如果true，则列表时显示缩略图，否则显示大图，默认：true </li>
|
|
|
<li>属性（watermark）：是否添加水印，默认：true </li>
|
|
|
<li>属性（noEffect）：是否无效果，本质设置css属性，默认：false </li>
|
|
|
<li>css属性（--image-size）：图片显示大小，默认： 10em </li>
|
|
|
<li>css属性（--image-border-radius）：图片显示圆角，默认： .4em</li>
|
|
|
<li>css属性（--image-margin）：图片外边距，默认： .5em .5em 0 0</li>
|
|
|
<li>css属性（--image-border）：图片边框，默认： #FFF solid 2px </li>
|
|
|
<li>css属性（--image-box-shadow）：图片阴影，默认： 0 0 .2em #0005</li>
|
|
|
<li>插槽（button）：上传按钮插槽</li>
|
|
|
<li>插槽（default）：图片列表插槽，作用域：list，不建议定义</li>
|
|
|
<li>事件（change）：modelValue发送了变化</li>
|
|
|
</ol>
|
|
|
|
|
|
</div>
|
|
|
<el-divider>单图片上传</el-divider>
|
|
|
<w-image-uploader v-model="imgs[0]" saveSrc max="1" v-model:uploading="imging" />
|
|
|
<pre>绑定值：{{ imgs[0] }}</pre>
|
|
|
<div>{{ imging ? '上传中' : '没有上传' }}
|
|
|
|
|
|
<w-image-view ref="imgView" />
|
|
|
<el-button @click="proxy.$refs.imgView.open(imgs[0])">重写的图片预览组件测试</el-button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<el-divider>9张图片上传</el-divider>
|
|
|
<div style="width: 50em;"><w-image-uploader v-model="imgs[1]" saveSrc max="9" text="9张图片上传"
|
|
|
style="--image-size:15em;" /></div>
|
|
|
|
|
|
<pre>绑定值：{{ imgs[1] }}</pre>
|
|
|
|
|
|
<el-divider>预览模式</el-divider>
|
|
|
<w-image-uploader style="width: 35em;" disabled :modelValue="[
|
|
|
'/files/default/2024/10/24/d0wt3m3j4tud.webp',
|
|
|
'/files/default/2024/10/24/4x53htt9v8j1.webp',
|
|
|
'/files/default/2024/10/24/1trnacdjxeoju.webp',
|
|
|
'/files/default/2024/10/24/742tvr5pq526.webp',
|
|
|
'/files/default/2024/10/24/1dg74ibgi0xbj.webp',
|
|
|
'/files/default/2024/10/24/1bgesfnixpfvt.webp',
|
|
|
'/files/default/2024/10/24/h1legy4o8tko.webp',
|
|
|
'/files/default/2024/10/24/9xe6yyoed9dj.webp'
|
|
|
]" />
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
<el-tab-pane label="文件上传组件">
|
|
|
<div style="padding: 1rem;">
|
|
|
<div>
|
|
|
文件上传组件说明：
|
|
|
<ol style="font-size: .8rem; line-height: 1.8;">
|
|
|
<li>基础用法： <w-file-uploader v-model="value" :getUploadKey="getUploadKey" max="1"
|
|
|
v-model:uploading="uploading" /></li>
|
|
|
<li>大小大于chunksize的大文件上传会自动分片上传</li>
|
|
|
<li>属性（getUploadKey）：获取上传凭证的方法，需要使用者提供，开发模式下提供:<br />
|
|
|
前端示例<br />
|
|
|
<pre class="code">
|
|
|
const getUploadKey =async () => {
|
|
|
let r = await request.get("/file/upload/getUploadKey")
|
|
|
return r.data
|
|
|
} </pre>
|
|
|
后端示例<br />
|
|
|
<pre class="code"> @GetMapping("getUploadKey")
|
|
|
public R getUploadKey() {
|
|
|
return R.ok().setData(FileUtils.getUploadKey());
|
|
|
}</pre>
|
|
|
|
|
|
</li>
|
|
|
<li>属性（v-model）：双向绑定上传的文件URL,max=1是类型为String,否则为Array</li>
|
|
|
<li>属性（v-model:uploading）：双向绑定是否上传中,PS: 上传完成后才允许业务表单提交</li>
|
|
|
<li>属性（max）：允许上传的文件数量，0表示没有限制,默认：0</li>
|
|
|
<li>属性（prefix）：上传路径前缀，默认：default</li>
|
|
|
<li>属性（keepFilename）：是否保留文件名, 默认：true</li>
|
|
|
<li>属性（disabled）：禁止上传（文件预览模式）， 默认：false</li>
|
|
|
<li>属性（text）：按钮文字，默认：上传文件</li>
|
|
|
<li>属性（accept）：允许上传的文件扩展名列表，默认：'' ,office:'.doc,.docx,.ppt,.pptx,.xls,.xlsx'</li>
|
|
|
<li>属性（maxSize）：允许上传的文件最大大小,0表示不限制，默认：0</li>
|
|
|
<li>属性（threadNum）：并行上传数量：默认：2</li>
|
|
|
<li>属性（retry）：重试次数，默认：3 </li>
|
|
|
<li>属性（chunksize）：分片大小，默认：5Mb，不建议修改</li>
|
|
|
<li>属性（border）：文件项是否显示边框，默认：true</li>
|
|
|
<li>插槽（button）：上传按钮插槽</li>
|
|
|
<li>插槽（default）：文件列表，作用域：list，不建议定义</li>
|
|
|
<li>事件（change）：modelValue发送了变化</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
</div>
|
|
|
<el-divider>单文件上传</el-divider>
|
|
|
<w-file-uploader v-model="data[0]" max="1" v-model:uploading="uploading" />
|
|
|
<pre>绑定值：{{ data[0] }}</pre>
|
|
|
<div>{{ uploading ? '上传中' : '没有上传' }}</div>
|
|
|
|
|
|
<el-divider>预览模式</el-divider>
|
|
|
<w-file-uploader v-model="data[0]" max="1" :border="false" disabled />
|
|
|
|
|
|
<el-divider>单word文件小于10kb上传</el-divider>
|
|
|
<w-file-uploader v-model="data[1]" max="1" accept=".docx,.doc" text="单word文件小于10kb上传" :max-size="10240" />
|
|
|
<pre>绑定值：{{ data[1] }}</pre>
|
|
|
|
|
|
|
|
|
<el-divider>多文件上传</el-divider>
|
|
|
<w-file-uploader v-model="data[2]" max="2" />
|
|
|
<pre>绑定值：{{ data[2] }}</pre>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { ref, getCurrentInstance } from 'vue'
|
|
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
|
|
const data = ref(['/files/default/2024/10/24/2nhdirb2ujey/5mb.txt'])
|
|
|
const uploading = ref(false)
|
|
|
|
|
|
const imgs = ref(['/files/default/2024/10/24/d0wt3m3j4tud.webp'])
|
|
|
const imging = ref(false)
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.code {
|
|
|
border: solid 1px #0001;
|
|
|
margin: .5rem;
|
|
|
padding: .5rem;
|
|
|
border-radius: .3rem;
|
|
|
}
|
|
|
</style> |