增加uview-plus二次封装的文件上次组件
This commit is contained in:
parent
15b08f0aa2
commit
2309fc46b6
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<up-upload :fileList="images" @afterRead="afterRead" @delete="deletePic" :multiple="multiple"
|
||||
:width="width" :height="height"
|
||||
:maxCount="10"></up-upload>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {$uploadFile} from '@/http/yskApi/file.js'
|
||||
import {
|
||||
ref, watch
|
||||
} from 'vue';
|
||||
|
||||
const props=defineProps({
|
||||
modelValue:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
width:{
|
||||
type:[String,Number],
|
||||
default:60
|
||||
},
|
||||
height:{
|
||||
type:[String,Number],
|
||||
default:60
|
||||
},
|
||||
multiple:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const emits=defineEmits(['update:modelValue'])
|
||||
const images = ref(props.modelValue)
|
||||
function afterRead(e){
|
||||
for(let i in e.file){
|
||||
const file=e.file[i].file
|
||||
$uploadFile(file).then(res => {
|
||||
console.log(res);
|
||||
images.value.push({
|
||||
url: e.file[i].url,
|
||||
serveUrl: res.data[0]
|
||||
})
|
||||
}).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>
|
||||
Loading…
Reference in New Issue