Detailed explanation of vue image upload function

This time, I did the image upload function of the vue page without the cropping function!

First, the html code, add the change event on the input box, as follows:

<ul class="clearfix">
        <li v-if=">0" v-for='(item ,index ) in imgs'>
          <img :src="item">
        </li>
        <li style="position:relative" v-if=">=6 ? false : true">
          <img src="../../assets/img/"><input class="upload" @change='add_img' type="file">
        </li>
</ul>

I have limited the number of pictures here, up to 6 pictures.

Then there is the data data, as follows:

data () {
  return {
    imgs: [],
    imgData: {
      accept: 'image/gif, image/jpeg, image/png, image/jpg',
    }
  }
 }

The imgs array is used to place the image path, and the page displays the image to loop through the array, and imgData determines the image type.

Next is the most important method in the methods, as follows:

add_img(event){ 
      let reader =new FileReader();
      let img1=[0];
      let type=;//The file type, determine whether it is an image      let size=;//The size of the file, determine the size of the picture      if((type) == -1){
        alert('Please select the image format we support!  ');
        return false;
      }
      if(size&gt;3145728){
        alert('Please select pictures within 3M!  ');
        return false;
      }
      var uri = ''
      let form = new FormData(); 
      ('file',img1,);
      this.$('/file/upload',form,{
        headers:{'Content-Type':'multipart/form-data'}
      }).then(response =&gt; {
        ()
        uri = 
        (img1);
        var that=this;
        =function(){
          (uri);
        }
      }).catch(error =&gt; {
        alert('There was an error uploading the picture!  ');
      })  
},

First, get the image you selected, judge the type and size of the image, and then submit it to the background in the form form. The background will return the online path of the image. Just push the image path returned by the background into the image array.

Generally speaking, there is also a way to delete pictures, which is to delete the path in the image array, submit the data to the background, and tell the background which picture has been deleted.

The above is a detailed explanation and integration of the vue image upload function introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!