Element UI 图片上传功能踩坑

 样式效果：

 
          
          

            将文件拖到此处，或
            点击上传
          
          
只能上传jpg/png/jpeg文件，且不超过1MB
        

 

 

 

 功能介绍：拖动上传 ，点击上传

 踩坑点：

            1：必须在请求头中提供 token 令牌

                  解决方法:    绑定   :headers="token" 

                                     //   data中设置请求头的token

                                     token: { Authorization: sessionStorage.getItem("token") },

            2：我们在用户删除要用户确认是否删除时，采用了 element ui 的 messageBox组件，想通过return flase的方式取消删除的话，就会出问题，如下图

 我们点击删除图片 ，会发现图片已经被删除，before-remove这个钩子没有起作用 ，这是因为 :on-remove(文件列表移除文件时的钩子) 会调用这个 before-remove 这个钩子里的函数，而我们的 messageBox组件 是异步的，返回的是promise对象，promise对象里的情况    

而  berfor-remove钩子说的很清楚，只有当返回 false ，或者返回的promise 为 reject时，才停止删除

 这里推荐两种解决办法，第一种是不用messageBox组件，直接用js内置的 confim() 实现，虽然样式普通了点，但无伤大雅

另一种使用是 messageBox组件来询问用户是否确认删除图片，方式直接 返回这个 promise对象 

// 文件列表移除文件之前的钩子
    handleRemove(file) {
      if (file.status === "success") {
        return this.$confirm(`是否删除${file.name}?`);
      }
    },

这样，取消 返回空=false，确认删除 返回一个promise对象=true。就好了