fix 修复文件上传和图片上传组件max=1时的错误,并增加list属性控制是否显示列表

master
管理员 8 months ago
parent 19ff36d040
commit 3a3e4e1786

@ -6,7 +6,7 @@
</div> </div>
<input ref="fileInputRef" v-if="!props.disabled" :accept="props.accept" @change="fileInputChange" type="file" <input ref="fileInputRef" v-if="!props.disabled" :accept="props.accept" @change="fileInputChange" type="file"
style="position: absolute; top:-100vh;" :multiple="props.max != 1" /> style="position: absolute; top:-100vh;" :multiple="props.max != 1" />
<div class="list"> <div class="list" v-if="props.list">
<slot :list="list"> <slot :list="list">
<div v-for="(item, index) in data" :key="index" class="item" <div v-for="(item, index) in data" :key="index" class="item"
:class="{ error: item.error, abort: item.abort, border: props.border }" :class="{ error: item.error, abort: item.abort, border: props.border }"
@ -131,6 +131,10 @@ const props = defineProps({
border: { border: {
type: Boolean, type: Boolean,
default: true default: true
},
list: {
type: Boolean,
default: true
} }
}) })
@ -298,9 +302,9 @@ const uploadFiles = async () => {
for (let i = 0; i < props.threadNum; i++) { for (let i = 0; i < props.threadNum; i++) {
a.push(doOne()) a.push(doOne())
} }
Promise.all(a).then(() => { Promise.all(a).then((r) => {
if (props.max == 1) { if (props.max == 1) {
mv.value = r.data mv.value = data.value.filter(a => 'url' in a).map(a => a.url)[0]
} else { } else {
mv.value = data.value.filter(a => 'url' in a).map(a => a.url) mv.value = data.value.filter(a => 'url' in a).map(a => a.url)
} }

@ -6,7 +6,7 @@
</div> </div>
<input ref="fileInputRef" v-if="!props.disabled" accept="image/*" @change="fileInputChange" type="file" <input ref="fileInputRef" v-if="!props.disabled" accept="image/*" @change="fileInputChange" type="file"
style="position: absolute; top:-100vh;" :multiple="props.max != 1" /> style="position: absolute; top:-100vh;" :multiple="props.max != 1" />
<div class="list" :class="{ noEffect: props.noEffect }"> <div class="list" :class="{ noEffect: props.noEffect }" v-if="props.list">
<slot :list="data"> <slot :list="data">
<div v-for="(item, index) in data" :key="index" class="item" :class="{ error: item.error, abort: item.abort }" <div v-for="(item, index) in data" :key="index" class="item" :class="{ error: item.error, abort: item.abort }"
:style="{ '--ps': item.uploading ? (item.uploading?.loaded || 0) * 100 / (item.uploading?.total || 1) + '%' : '100%' }" :style="{ '--ps': item.uploading ? (item.uploading?.loaded || 0) * 100 / (item.uploading?.total || 1) + '%' : '100%' }"
@ -161,6 +161,10 @@ const props = defineProps({
noEffect: { noEffect: {
type: Boolean, type: Boolean,
default: false default: false
},
list: {
type: Boolean,
default: true
} }

@ -37,6 +37,7 @@ const getUploadKey =async () => {
<li>属性saveMin是否保存缩略图如果true则列表时显示缩略图否则显示大图默认true </li> <li>属性saveMin是否保存缩略图如果true则列表时显示缩略图否则显示大图默认true </li>
<li>属性watermark是否添加水印默认true </li> <li>属性watermark是否添加水印默认true </li>
<li>属性noEffect是否无效果本质设置css属性默认false </li> <li>属性noEffect是否无效果本质设置css属性默认false </li>
<li>属性list是否显示列表默认true</li>
<li>css属性--image-size图片显示大小默认 10em </li> <li>css属性--image-size图片显示大小默认 10em </li>
<li>css属性--image-border-radius图片显示圆角默认 .4em</li> <li>css属性--image-border-radius图片显示圆角默认 .4em</li>
<li>css属性--image-margin图片外边距默认 .5em .5em 0 0</li> <li>css属性--image-margin图片外边距默认 .5em .5em 0 0</li>
@ -113,6 +114,7 @@ const getUploadKey =async () => {
<li>属性threadNum并行上传数量默认2</li> <li>属性threadNum并行上传数量默认2</li>
<li>属性retry重试次数默认3 </li> <li>属性retry重试次数默认3 </li>
<li>属性chunksize分片大小默认5Mb不建议修改</li> <li>属性chunksize分片大小默认5Mb不建议修改</li>
<li>属性list是否显示列表默认true</li>
<li>属性border文件项是否显示边框默认true</li> <li>属性border文件项是否显示边框默认true</li>
<li>插槽button上传按钮插槽</li> <li>插槽button上传按钮插槽</li>
<li>插槽default文件列表作用域list不建议定义</li> <li>插槽default文件列表作用域list不建议定义</li>

Loading…
Cancel
Save