Как сохранить образ localStorage в базе данных и на сервере?

Question

Я хочу сохранить изображение в локальном хранилище, а затем сохранить изображение в базе данных и на сервере с другой страницы, когда пользователь нажимает кнопку.

На самом деле я хочу получить пользователя формы изображения на странице продукта и в На странице оформления заказа, когда они нажимают кнопку «разместить заказ», изображение будет сохранено в базе данных и на сервере.

Итак, я сохранил изображение в localalstorage как DataURL, а со страницы оформления заказа я хотел получить изображение из localalstorage и создать скрытую форму на странице оформления заказа и установите значение поля ввода как DataURL.

Я использую php в качестве языка на стороне сервера.

Я на правильном пути, чтобы сделать это?

Вставить фотографию:

<div class="file">
   <input type="file" v-model="uphoto" @change="onFilechange($event)" name="photo">
</div>

onchange:

onFileChange($event) {
   let file = event.target.files[0];
   let reader = new FileReader();
   reader.onload = event => {
       this.uphoto = event.target.result;
   };
   reader.readAsDataURL(file);

   //save to localstorage
   if (localStorage.uphoto) {
       this.uphoto = localStorage.uphoto;
   }
},

На странице оформления заказа:

<form id="myForm" action="">
   <input id="utext" type="text" name="utext">
   <input id="uimage" type="file" name="uimage">
   <input type="button" onclick="myFunction()" value="Submit form">
</form>

<script type="text/javascript">
   var utext = document.getElementById('utext').value = localStorage.getItem('usertext');
   var uimage = document.getElementById('uimage').value = localStorage.getItem('uphoto');

    console.log(uimage);
</script>         

Когда я console.log(uimage) Я получаю ошибку

InvalidStateError: Была предпринята попытка использовать объект, который больше не пригоден для использования.

Что мне теперь делать?

Спасибо за ваше время.