How to upload and preview files for vue

<template>
<div >
<input name="files"  type="file" accept="images/*" multiple @change="change"/>
<div class="file_upload">
<div class="progress"></div>
</div>
<div class="img_holder"></div>
</div>
</template>
<script>
export default {
name: "file",
methods: {
change(E) {
//Get the obtained picture list (select multiple pictures)let file = [0];
//Get the obtained picture list (select one)//let img1 = [0];
//let reader = new FileReader();
//($("#uploaderInput")[0].files);
//(img1);
//let type = ; //The file type, determine whether it is an image//let size = ; //The size of the file, determine the size of the picturevar reader = new FileReader(); // Create a new FileReader object(file); //Read as base64//The following code can be deleted = function() {
("start"); //Start reading};
//Code progress bar = function(e) {
//This is a time-triggered event, and it is more obvious when the file is larger//(e)
var p = "Completed:" + ( /  * 100) + "%";
$(".file_upload")
.find(".progress")
.html(p);
("uploading"); //The file is larger, multiple uploading will appear};
 = function() {
("abort"); //Used as cancel upload function};
 = function() {
("error"); //From when a file read error occurs, it cannot be simulated for the time being};
//After successful, get the file url = function(e) {
("load complete"); //Finish(e);
let res = (";"); //Intercept data:; Base64 After conversion, the data attribute will be used to determine the file format; it is divided into two segments, the front segment is data, and the back end is the file base64 encodingif (res[0] != "data:application/apk;") {
// Different browsers will have different parsing; so this step is handled separately_this. = "data:application/apk;" + res[1];
} else {
_this. = ;
}
(_this.)
};
//Preview code = function(e) {
var dataURL = ,
image = '<img src="' + dataURL + '"/>', //Preview picturestext = '<span>"' + dataURL + '"</span>'; //Test preview textvar name = ,
size = ( / 1024);
var div = "<p>Name: " + name + "</p><p>Size: " + size + "kb</p>";
var imglist =
'<div class="img_box"><span class="delete">X</span>' +
image +
div +
"</div>";
$(".img_holder").html(imglist);
};
// if ((type) == -1) {
// alert("Please select the image format we support!");// return false;
// }
// if (size > 3145728) {
// alert("Please select pictures within 3M!");// return false;
// }
}
}
};
</script>
 

<input type="file" multiple @change="upload" /><br />
<img v-for="item in previewUrl" :src="item" width="100" /><br />
<button type="button" @click="submitFile">submitFile</button>

data () {
	 return {
	   previewUrl: [],
	   formData: undefined
	 },
     methods: {
      preview (file) {
      // Get the preview image base64        return new Promise((resolve, reject) => {
          let read = new FileReader()
          (file)
           = function(e) {
            resolve()
          }
        })
      },
      upload (e) {
      // Trigger after selecting the picture, put the file in the formdata object         = []
        const files = 
        const that = this
         = new FormData()
        (files)
        for(let file of files){
          ('file', file)
          (file).then(res => {
            (res)
          })
        }
        (('file'))
      },
      submitFile (file, fileList) {
      // axios sends data to the server        let setting = {
          url: 'http://localhost:3000/uploadfile',
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: 
        }
        this._axiosMock(setting).then(res => {
          (res)
        })
      }
    }