In my scenario, I have to upload a set of files against a particular notice. From the create notice component I get a notificationid which is sent along with the post request of el-upload component. I can see the values getting updated in the console and in Vue dev tools. But only the initial value of nid (i.e 12) is sent to the controller. I have no clue why this is happening. Please help.
<template>
<el-upload
class="upload-demo"
action="/api/upload/"
name="file[]"
ref="upload"
:data = {nid:getNID}
:on-success="handleSuccess"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="5"
:on-exceed="handleExceed"
:file-list="fileList"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
<el-button id="my-custom-btn" style="margin-left: 10px;display:none;" size="small" type="success" @click="submitUploadCustom">upload to server</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [],
nid: 12,
uploadedCount: 0,
uploading: true
};
},
computed: {
getNID :{
// return this.nid;
get: function () {
console.log("getNid"+this.nid)
return this.nid;
},
// setter
set: function (newValue) {
this.nid = newValue;
console.log("setNID"+this.nid);
}
}
},
methods: {
submitUploadCustom() {
this.$refs.upload.submit();
},
submitUpload(notificationId) {
this.getNID = notificationId;
// File upload trigger submit
document.getElementById('my-custom-btn').click();
},
handleSuccess(response, file, fileList) {
this.uploadedCount+=1;
console.log(this.uploadedCount, fileList.length);
if ( this.uploadedCount === fileList.length ) {
console.log("All files uploaded");
window.location.assign("localhost:8000/notifications")
} else {
console.log("Success");
}
},
handleRemove(file, fileList) {
let vm = this
axios.delete('/api/upload/' + file.uid)
.then(function () {
let index = _.findIndex(vm.fileList, ['uid', file.uid])
vm.$delete(vm.fileList, index)
})
.catch(function (error) {
console.log(error);
});
},
handleExceed(files, fileList) {
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
},
beforeRemove(file, fileList) {
return this.$confirm(`do you really want to delete ${ file.name }？`);
}
}
}
</script>
@mjoseph you're not setting the value of getNID anywhere apart from
submitUpload(notificationId) {
this.getNID = notificationId;
// File upload trigger submit
document.getElementById('my-custom-btn').click();
},
which isn't being called anywhere in your code, so it will always be using the initial value which is 12...
I finally found the solution. The problem was that the "data" props of el-upload was updating after submission only. So to solve it, I assigned nid of el-upload component using references
submitUpload(notificationId) {
this.$refs.upload.data.nid = notificationId;
// File upload trigger submit
document.getElementById('my-custom-btn').click();
}
Please or to participate in this conversation.