problem description
wrote a sub-component for uploading images. The only ID field for the first upload is empty. After the upload is successful, the backend returns a unique id, for the second upload, the previous id will be written into the parameters and then uploaded.
the problem now is that id could not be written into the parameters the second time. Each upload will generate a new id;
.related codes
- template Code
parent component,
</upload-case-img-two>
....
//
bindFace(val){
console.log(val);
this.categoryId = val.categoryId
}subcomponents
<template>
<vue-dropzone
ref="twoVueDropzone"
id="dropzone"
:options="dropzoneOptions"
@vdropzone-success="vsuccess"
></vue-dropzone>
</template>
// Dropzone
...
props:{
categoryId: {
type: String,
default:""
}
}
data: function() {
return {
// backUrl:"",
Dropzone: null,
dropzoneOptions: {
url: "/common/oss/upload_by_category_id",
paramName: "file",
params: {imageName: this.desc, categoryId: this.categoryId, orderSort:this.order} ,
thumbnailWidth: 150,
maxFilesize: 1, //
maxFiles: 1, //
addRemoveLinks: true,
headers: { "My-Awesome-Header": "header value" },
dictDefaultMessage: `<i class="fa fa-cloud-upload"></i></br>${
this.desc
}`,
dictRemoveLinks: "",
dictCancelUpload: "", //
dictInvalidInputType: "", //
dictCancelUploadConfirmation: "", //
dictFileTooBig: "", //
dictRemoveFile: "", //
dictMaxFilesExceeded: "" //
}
};
},
// categoryId
watch: {
categoryId(newValue, oldValue) {
console.log(`${oldValue}`);
this.categoryId = newValue;
console.log(`id${this.categoryId}`);
}
},demand
I don"t know how to reinitialize the upload component when the categoryId of the subcomponent changes (when there is a value) so that the parameters are passed in. Ask for advice