ElementUI实现Upload文件上传服务器交互

   <!-- :data为上传后台额外的参数 -->
   <!-- action为服务器链接 -->
   <!-- getupload、getdel为上传成功和删除的钩子 -->
<el-upload accept="image/*" :data="upload"
     action="http://uploadFile" :file-list="fileList" ref="upload"
     list-type="picture" :on-success="getupload" :on-remove="getdel">
         <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<script>
 data() {
  return {
    fileList: [],
    upload_list: [],
    upload: {
	    data: 'file'
     }
  }
}
methods: {
	//上传成功push到新的数组里面去
    getupload(res, file, fileList) {
        this.upload_list.push(res.info.url)
    },
    //删除图片通过indexOf拿取下标，再让下标去删除图片
    getdel(file, fileList) {
        var index = this.upload_list.indexOf(file.response.info.url)
        console.log(index)
        this.upload_list.splice(index, 1);
    },
    //提交打印出图片
    getsubmit() {
       console.log(this.upload_list)
    }
    //可清空上传的图片
    getclear(){
		this.$refs.upload.clearFiles()
	}
</script>