Vue+element实现文件上传功能

Vue+element实现文件上传的功能需求

效果图：

 1.上传HTML代码：

 
   
    
        
         

                  将文件拖到此处，或点击上传
         
        

                  只能上传.kmz文件
    
   
 

 2.回调上面的事件的代码：

  uploadEditFile(fileList, fileEditList) {
      this.fileList = fileEditList;
        //创建已经formData的实例
      const form = new FormData();
      fileEditList.forEach((item) => {
        form.append("file", item.raw);//二进流
      });
      uploadKMZFile(form).then((res) => {
        if (res.status == 200 && res.data.data) {
          this.formTask.filePath = res.data.data;
        }
      })
    },

3.额外加了一个关闭窗口的事情，情况文件上传：

resetMapActionList() {
   //清空已上传的文件
   this.$refs.upload.clearFiles();
},

以上就是上传的功能啦，有写的不好的，可以留言纠正哈，可以的点点赞~