У меня есть модал предварительного просмотра аватара:
<avatar-update :img-file="avatarFile" :show="avatarModalShow" :img-url="url" @close="avatarModalShow = !avatarModalShow" :change-avatar="updateCrop" @destroyUrl="imgUrl = null"> </avatar-update>
При отправке аватара я использую свой root для отправки нескольких свойств компоненту AvatarUpdate.
HTML
<div>
<label for="avatar" class="cursor-pointer thumbnail-link bg-white p-1 rounded-lg" href="">
<img class="thumbnail" src="{{asset('images/avatars/avatar-1.png')}}">
</label>
<input id="avatar" class="hidden" type="file" @change="onFileChange"/>
</div>
Root
onFileChange: function(e) {
const file = e.target.files[0];
this.url = URL.createObjectURL(file);
this.updateCrop = !this.updateCrop;
this.avatarModalShow = !this.avatarModalShow;
this.avatarFile = file;
},
Когда я console.log файл const в функции onFileChange, я получаю объект файла. Однако когда я пытаюсь вывести свойство {{imgFile}} в компоненте AvatarUpdate, я получаю пустой объект.
Мне интересно, безопасно ли это и можно ли манипулировать данными файла между корнем и компонентом AvatarUpdate? Также есть ли что-то, что мешает мне отправлять и выводить объект файла как свойство? Почему он дает мне пустой объект в компоненте AvatarUpdate?
Прошу прощения за столь много вопросов, но мои соображения по поводу включения их в один пост заключаются в том, что я думаю, что может быть какая-то функциональность безопасности, не позволяющая мне отправлять объект файла через компонент.
Редактировать
Вот мой компонент AvatarUpload:
<modal v-show="show" heading="Avatar Preview" @close="close">
<div class="flex flex-col">
<h4 class="text-blue-light mb-5">The avatar will be automatically cropped from the center.</h4>
<div class="flex flex-col items-center">
<img class="w-2/3" :src="imgUrl">
</div>
<p>{{imgFile}}</p>
<button class="mt-4 h-10 self-end text-center bg-third-color hover:bg-secondary-color text-white font-bold py-2 px-4 rounded" v-on:click="submitAvatar()">Submit</button>
</div>
<script>
export default {
props: ['show','imgUrl','changeAvatar','imgFile'],
data() {
return {
image: null,
message: null
}
},
methods: {
close: function(){
this.$emit('close');
},
submitAvatar: function(){
console.log(file);
axios({
method: 'POST',
url: '/profile/avatar',
data: {},
}).then(function (response) {
this.message = "Your avatar has been submitted";
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
}
}
</script>
Я уже могу получить BLOB-объект из this.url = URL.createObjectURL(file); в функции onFileChange на корневом экземпляре. То, что я пытаюсь сделать, это отправить весь объект файла в компонент AvatarUpdate с помощью :img-file="avatarFile" prop.
Таким образом, я могу отправить данные способом, к которому можно получить доступ по запросу в контроллере Laravel:
submitAvatar: function(){
//Change here!
var data = new FormData()
var file = this.imgFile;
data.append('avatar', file);
axios({
method: 'POST',
url: '/profile/avatar',
data: data,
}).then(function (response) {
this.message = "Your avatar has been submitted";
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
Laravel UserController
UserController
public function avatar(Request $request)
{
return $request->hasFile('avatar');
}