ElementUI上传图片携带token请求头

ElementUI上传图片携带token请求头

使用增删改等请求时，我们经常需要在请求中添加请求头headers以进行用户认证。在ElementUI中，其封装了一个action的必选参数，表示上传的请求（地址）。作为初学者，刚开始我一直查找如何在action中传递headers，最后在官方文档查到了解决方案。

---

一、使用:headers绑定上传的请求头

代码如下（示例）：

<el-upload action="http://localhost:8081/blog/uploadAvatar" 
                                                   :headers="headers" 
                                                   list-type="picture-card" 
                                                   :on-preview="handlePictureCardPreview" 
                                                   :on-remove="handleRemove">
                                            <i class="el-icon-plus"></i>
                                            <p>更改头像</p>
                                        </el-upload>

二、在computed属性中添加headers信息

data() {
            return {
                computed: {
                    headers() {
                          return {
                          "Authorization": localStorage.getItem("token")
                }
            }
        }
      }
}
        

三、使用axios收发请求时，携带请求头

edit() {
                this.$axios.post("/user/edit", this.form,{
                    headers: {
                        "Authorization": localStorage.getItem("token")
                    }
                })
                window.location.reload()
            }