I am handling vue and laravel image upload. I am passing image from vue to controller via axios
In vuejs :
<b-col md="3">
<b-form-group>
<label>ImageLogo:</label>
<b-form-file
name="image-logo"
@change="changeImageLogo"
/>
</b-form-group>
</b-col>
<b-col md="3">
<b-form-group>
<label>Success image:</label>
<b-form-file
name="success-image"
@change="changeSuccessImage"
/>
</b-form-group>
</b-col>
<b-col md="3">
<b-form-group>
<label>Fail image:</label>
<b-form-file
name="fail-image"
@change="changeFailImage"
/>
</b-form-group>
</b-col>
<b-col md="3">
<b-form-group>
<label>Image payment success:</label>
<b-form-file
name="image-payment"
@change="changePaymentSuccess"
/>
</b-form-group>
</b-col>
<b-row>
<b-col md="5">
<b-button variant="primary" block type="submit" @click="submitForm">
Create
</b-button>
</b-col>
</b-row>
data () {
return: {
logo:'',
imageSuccess:'',
failImage:'',
successPayment:''
}
},
methods: {
changeImageLogo(e) {
let selectFile = e.target.files[0];
this.logo = selectFile;
},
changeSuccessImage(e) {
let imgSuccess = e.target.files[0];
this.imageSuccess = imgSuccess;
},
changeFailImage(e) {
let failImg = e.target.files[0];
this.failImage = failImg;
},
successPayment(e) {
let sspayment = e.target.files[0];
this.successPayment = sspayment;
},
submitForm() {
let formData = new FormData();
formData.append("image-log", this.logo);
formData.append("success-image", this.imageSuccess);
formData.append("changeFailImage", this.failImage);
formData.append("image-paymnet", this.successPayment);
}
}
I use formData.append to pass the controller, but when there are many input files I have to write many methods. Is there a way to combine methods to get images together. Why do I need to pass up to 10 input files? Please give me ideas.Thank
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire