How to transfer the picture obtained by el-input to the next page by vue

problem description

do an image search function, because paging is involved in the search page, so you want to upload the local images obtained in the search box to the search page for upload search.

the environmental background of the problems and what methods you have tried

I have tried to save the acquired file file to sessionstroge, but the saved data is defective, so I don"t know how to do it

.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Apr.02,2022

use FileReader to convert pictures to binary and then save them?

// js
if (window.localStorage.img) {
  document.querySelector('img').setAttribute('src', window.localStorage.img)
}
const reader = new FileReader();
reader.readAsDataURL(document.querySelector('input').files[0]);
reader.onload = function() {
  console.log(this.result, 2)
  window.localStorage.img = this.result
}

// html
<body>
<input type="file" />
<img src="" />
</body>

I think this problem should be the communication between vue components

  • parent-child communication

    • props
  • son communicates with parent

    • emit
  • Communication between components

    • vue Bus bus
  • more complicated?

    • vuex
Menu