[Vuejs]-How to access uploaded image using vue.js

0👍

If I understand you correctly, you want to post your images list to backend, but you don’t know how to get data from files like this:
enter image description here
and send data to backend. And in backend, you can only see image name, am i right?

If so, here is my example code:

    async submitFile() {
      let filelist = [];
      for (let i = 0; i < this.files.length; ++i) {
        filelist.push(
          await (async (cur) => {
            return new Promise((resolve, reject) => {
              const fr = new FileReader();
              fr.onload = () => {
                resolve(fr.result);
              };
              fr.readAsDataURL(cur);
            });
          })(this.files.item(i))
        );
      }
      let formData = new FormData();
      formData.append("files", filelist);
      axios.post('/multiple-files', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(function() {
          console.log('SUCCESS!!');
        })
        .catch(function() {
          console.log('FAILURE!!');
        });
    },

The focus is to use FileReader.readAsDataURL to get the image as base64 encoded data. Then you have image data in the backend like this:
enter image description here

Leave a comment