The combination of uni-file-picker has been hit by many pitfalls in the use of the problem. I still cannot limit the upload of duplicate files without changing the uniapp source code. Because of how to limit it, the value of v-model bound to uni-file-picker seems to echo the attachment as long as the file is uploaded. Another problem is that the uploaded progress bar does not work properly. Just hide CSS and forget it without seeing it.
I tried to tame this component many times and found that if I want to synchronize the uploaded file list to the parent component, don’t pass the value value bound by the component, because this will cause problems. Just treat this variable as a simple display. The data transmission of parent and child components can be done by two-way binding, and the addition, deletion and modification of files can be used to operate the two-way binding data.
Subcomponent: Encapsulated file upload
<template>
<uni-file-picker
v-model="fileList"
:auto-upload="false"
file-mediatype="all"
mode="grid"
@delete="delFile"
@select="select"
>
<text class="iconfont icon-zengjiatianjiajiahao"></text>
</uni-file-picker>
</template>
<script setup>
import {ref, reactive, watch} from "vue";
const props = defineProps({
appendixEntityList: {default: []},
});
const emit = defineEmits(["update:appendixEntityList"]);
let fileList = ref([]);
// Select the upload trigger functionconst select = (e) => {
// Call the upload function multiple times according to the number of selected pictures let promises = [];
for (let i = 0; i < ; i++) {
const promise = uploadFiles(, i);
(promise);
}
(promises).then(() => {
});
};
// Upload functionconst uploadFiles = async (tempFilePaths, i) => {
await ({
url: '/api/xxx/xxxx/xxxx', //The interface used by the backend to process pictures and return the image address filePath: tempFilePaths[i],
name: "file",
header: {
Authorization: "Bearer " + ("token") || "",
ContentType: "application/x-www-form-urlencoded",
skipToken: true,
},
success: (res) => {
let v = (); //The returned string needs to be converted to object format if ( == 200) {
({
appendixId: ,
appendixOriginal: ,
appendixUrl: ,
});
emit("update:appendixEntityList", );
}
},
fail: () => {
("err");
},
});
};
//File list echoconst fileListEcho = () => {
if ( > 0) {
= [];
?.forEach((v) => {
//Change it to the format required by the official document. Only then can the attachment be reflected ({
name: v?.appendixOriginal,
extname: v?.appendixType,
url: v?.appendixUrl,
});
});
}
};
// Move out the picture functionconst delFile = async (val) => {
//Delete the deleted file in the commit array ((v, i) => {
if ( === ) {
(i, 1);
emit("update:appendixEntityList", );
return true;
}
});
};
watch(
() => ,
(newVal) => {
fileListEcho();
},
);
</script>
<style lang="scss" scoped>
.icon-zengjiatianjiajiahao {
font-size: 42rpx;
color: #a2a3a5;
position: absolute;
right: 0;
top: -50rpx;
}
</style>Parent component:
<!-- Upload-->
<c-upload
ref="uploadRef"
v-model:appendixEntityList=""
></c-upload>This is the end of this article about uploading attachments to vue3+uniapp. For more related content to upload attachments to vue3+uniapp, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!