88 lines
1.7 KiB
Vue
88 lines
1.7 KiB
Vue
<template>
|
|
<view>
|
|
<l-upload ref="imgUpload" uploadType="img" :serverUrl="BASE_URL" :formData="{isImg: 'true'}"
|
|
:width="110" :height="110" :images="_value || []" :header="header" :max-size="props.formProps.maxSize"
|
|
:disableAdd="readonly" :limit="props.formProps.maxNumber" @complete="complete" @remove="remove"
|
|
:disable="readonly">
|
|
</l-upload>
|
|
<view v-if="!readonly" style="color: #999999; font-size: 26rpx;">{{ props.formProps.placeholder || '请上传图片' }}
|
|
{{ sizeTip }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
computed
|
|
} from 'vue'
|
|
import {
|
|
BASE_URL
|
|
} from '@/api/request.js'
|
|
|
|
const imageStyles = {
|
|
width: 80,
|
|
height: 80,
|
|
padding: '19rpx'
|
|
}
|
|
|
|
const header = ref({
|
|
Authorization: "Bearer " + uni.getStorageSync('wflow-token')
|
|
})
|
|
|
|
const props = defineProps({
|
|
formProps: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
modelValue: Array,
|
|
readonly: Boolean
|
|
})
|
|
|
|
const _value = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(val) {
|
|
emits('update:modelValue', val)
|
|
}
|
|
})
|
|
|
|
const sizeTip = computed(() => {
|
|
return props.formProps.maxSize > 0 ? `| 每张图不超过${props.formProps.maxSize}MB` : ''
|
|
})
|
|
|
|
const emits = defineEmits(['update:modelValue','resize'])
|
|
|
|
const imgUpload = ref()
|
|
function resizeCollapse(){
|
|
setTimeout(() => emits('resize'), 800)
|
|
}
|
|
function complete(e) {
|
|
_value.value = e.imageArr
|
|
if ((_value.value || []).length < e.imageArr.length) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '上传图片成功'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '移除图片成功'
|
|
})
|
|
}
|
|
resizeCollapse();
|
|
}
|
|
|
|
function remove(i) {
|
|
if (!props.readonly) {
|
|
_value.value.splice(i, 1)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |