125 lines
2.7 KiB
Vue
125 lines
2.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 originVal = ref([]);
|
|
const _value = computed({
|
|
get() {
|
|
let dealArr = [];
|
|
// console.log(JSON.stringify(props.modelValue),123)
|
|
// console.log(JSON.stringify(originVal.value),456)
|
|
// console.log(JSON.stringify(dealArr),111222)
|
|
if (JSON.stringify(props.modelValue) == JSON.stringify(originVal.value)) {
|
|
return originVal.value
|
|
}
|
|
originVal.value.length = 0;
|
|
if(props.modelValue){
|
|
originVal.value = props.modelValue;
|
|
console.log(JSON.stringify(originVal.value),888)
|
|
originVal.value.map(item => {
|
|
if(item.url.indexOf("http://") != -1 || item.url.indexOf("https://") != -1){
|
|
dealArr.push({
|
|
...item,
|
|
id: item.name,
|
|
url: item.name,
|
|
isImage: true,
|
|
contentType: "image/png"
|
|
})
|
|
} else {
|
|
dealArr.push({
|
|
...item,
|
|
id: item.url,
|
|
url: item.url,
|
|
isImage: true,
|
|
contentType: "image/png"
|
|
})
|
|
}
|
|
|
|
})
|
|
return dealArr
|
|
} else {
|
|
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) {
|
|
console.log(JSON.stringify(e), 666777)
|
|
_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> |