113 lines
1.9 KiB
Vue
113 lines
1.9 KiB
Vue
<template>
|
|
<up-upload :fileList="images" @afterRead="afterRead" @delete="deletePic" :multiple="multiple" :width="width"
|
|
:height="height" :maxCount="maxCount"></up-upload>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
import { uploadFile } from '@/http/api/index.js'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
width: {
|
|
type: [String, Number],
|
|
default: 60
|
|
},
|
|
height: {
|
|
type: [String, Number],
|
|
default: 60
|
|
},
|
|
maxCount: {
|
|
type: [Number],
|
|
default: 10
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
|
|
|
|
const emits = defineEmits(['update:modelValue'])
|
|
const images = ref(props.modelValue)
|
|
|
|
|
|
|
|
function uploadfile(par){
|
|
let file=null;
|
|
// #ifdef H5
|
|
file= par.file
|
|
// #endif
|
|
// #ifndef H5
|
|
file= par
|
|
// #endif
|
|
return uploadFile(file)
|
|
}
|
|
|
|
function afterRead(e) {
|
|
console.log(e);
|
|
if (Array.isArray(e.file)) {
|
|
for (let i in e.file) {
|
|
const file = e.file[i]
|
|
console.log(file);
|
|
uploadfile(file).then(res => {
|
|
console.log(res);
|
|
images.value.push({
|
|
url: e.file[i].url,
|
|
serveUrl: res
|
|
})
|
|
}).catch(res => {
|
|
console.log(res);
|
|
if (res.errMsg) {
|
|
images.value.splice(i, 1)
|
|
uni.showToast({
|
|
title: '图片大小超出限制',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
|
|
})
|
|
}
|
|
}else{
|
|
const i=0
|
|
uploadfile(e.file).then(res => {
|
|
console.log(res);
|
|
images.value.push({
|
|
url: e.file.url,
|
|
serveUrl: res
|
|
})
|
|
}).catch(res => {
|
|
console.log(res);
|
|
if (res.errMsg) {
|
|
images.value.splice(i, 1)
|
|
uni.showToast({
|
|
title: '图片大小超出限制',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
function deletePic(e) {
|
|
const {
|
|
index
|
|
} = e
|
|
images.value.splice(index, 1)
|
|
}
|
|
|
|
watch(() => images.value, (newval) => {
|
|
emits('update:modelValue', newval)
|
|
})
|
|
watch(() => props.modelValue, (newval) => {
|
|
images.value = newval
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
</style> |