126 lines
2.3 KiB
Vue
126 lines
2.3 KiB
Vue
<template>
|
|
<up-upload
|
|
:fileList="images"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
:multiple="multiple"
|
|
:width="width"
|
|
:height="height"
|
|
:maxCount="maxCount"
|
|
>
|
|
<template #default v-if="$slots.default">
|
|
<slot></slot>
|
|
</template>
|
|
</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>
|