element-UI 中的upload组件如何添加token?

Question

我看到文档里可以设置header属性,我是这样设置的（token已经保存在localStorage里面）： :headers.Authorization = "localStorage.getItem('token')" , 但是upload组件就不起作用了，没有办法上传文件。
不知道正确的设置token的姿势是什么？有木有小伙伴可以告诉我哪里出错了？如何设置token?

Answer 1

不要用action 用before-upload 自己上传 想怎么传就怎么传

// 随便写个action 不写会报错
<el-upload action="123" :before-upload="beforeUpload"></el-upload>


beforeUpload (file) {
    let fd = new Formdata()
    fd.append('key', file, 'fileName')
    
    // 自己上传文件 想加什么都可以
    axios.post([url], fd, {
    
        // 加这里
        headers: {
            
        }
    })
    return false // 返回false不会自动上传
}

Answer 2

elementUI 的文档上写着headers是个对象, 照我的理解, 应该这么用

<template>
    <el-upload action="test" :headers="myHeaders"></el-upload>
</template>

<script>
var token =  localStorage.getItem('token') // 要保证取到

export default {
    data () {
        return {
            myHeaders: {Authorization: token}
        }
    }
}
</script>

Answer 3

把headers放在计算属性中，后来解决了。谢谢大家的回答。

Answer 4

Answer 5

我现在上传excel，接口是

怎么设置，从html到js部分，万分感谢

Answer 6

加在计算属性，不行