//index.vue
img1:<uploadArea ref="upload1" :url="url"/>
img2:<uploadArea ref="upload2" :url="url"/>
<button @click="submit"></button>
//http
async submit () {
let imgs1 = await this.$refs.upload1.uploadPic();
let imgs2 = await this.$refs.upload2.uploadPic();
console.log(imgs1[0])
}
//uploadImg.vue
uploadPic() {
//...
return imgs //ajaxhttp
}process is to first click the submit button to trigger the submit method to execute the sub-component"s uploadPic method, upload the local image to the http link, and then execute the code under submit to submit the form. Because uploadImg.vue is a generic component, it cannot deal with business logic.
all images in the project are uploaded using the uploadImg.vue component, but some pages have multiple places to use the image upload component.
I have tried that I cannot upload imgs to the index page through return. Is there any other way to solve this problem?