vue文件上传-上传和刷新token丢失问题

一、vue文件上传

我们采用的方法是使用element组件实现文件上传：

可参考官网：Element - The world's most popular Vue UI framework

1. 点击上传，参考代码如下：

1.  
   <el-upload
2.  
   class="upload-demo"
3.  
   action="https://jsonplaceholder.typicode.com/posts/"
4.  
   :on-preview="handlePreview"
5.  
   :on-remove="handleRemove"
6.  
   :before-remove="beforeRemove"
7.  
   multiple
8.  
   :limit="3"
9.  
   :on-exceed="handleExceed"
10.  
    :file-list="fileList">
11.  
    <el-button size="small" type="primary">点击上传</el-button>
12.  
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
13.  
    </el-upload>
14.  
    <script>
15.  
    export default {
16.  
    data() {
17.  
    return {
18.  
    fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
19.  
    };
20.  
    },
21.  
    methods: {
22.  
    handleRemove(file, fileList) {
23.  
    console.log(file, fileList);
24.  
    },
25.  
    handlePreview(file) {
26.  
    console.log(file);
27.  
    },
28.  
    handleExceed(files, fileList) {
29.  
    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length fileList.length} 个文件`);
30.  
    },
31.  
    beforeRemove(file, fileList) {
32.  
    return this.$confirm(`确定移除 ${ file.name }？`);
33.  
    }
34.  
    }
35.  
    }
36.  
    </script>

2.  效果如下：

 3. 一些常用属性：

action，必选参数，上传的地址。

headers，设置上传的请求头部。

multiple，是否支持多选文件，类型boolean。

show-file-list，是否显示已上传文件列表，类型boolean。

drag，是否启用拖拽上传，类型boolean。

on-success，文件上传成功时的钩子。

可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。

可通过设置before-remove来阻止文件移除操作。

注意：通过 slot 你可以传入自定义的上传按钮类型和文字提示（tip）。

二、刷新或者第多次上传时，上传失败问题

产生这一问题的原因是前端登录业务中刷新页面导致VueX中存储的Token丢失问题。

一般我们头部headers有两种写法。当我们采用下面第一种的时候，会出现Token丢失问题。

1.  
   写法一：
2.  
    
3.  
   <template>
4.  
   <div>
5.  
   <el-upload
6.  
   class="upload"
7.  
   :action="actionUrl"
8.  
   :on-success="handleUploadSuccess"
9.  
   :headers="headers"
10.  
    :show-file-list="false"
11.  
    >
12.  
    <el-button size="small">
13.  
    <i class="el-icon-upload el-icon--left">点击上传</i>
14.  
    </el-button>
15.  
    </el-upload>
16.  
    </div>
17.  
    </template>
18.  
     
19.  
    <script>
20.  
    export default {
21.  
    data() {
22.  
    return {
23.  
    headers: {
24.  
    token: this.$store.state.authToken
25.  
    },
26.  
    };
27.  
    }
28.  
    </script>

因为在此种写法中，token是固定的，当页面刷新时store被清，本地 token为空。

1. 这样说比较容易理解：比如在实现用户登录注册的业务时，通过ajax请求将用户注册的用户名和密码发送给服务器（可以将数据放入请求头中)，服务器返回一个账号专属Token,将Token存储在总store中，然而刷新页面将导致store中的Token值丢失，变为初始值，即为空串，导致后续一系列需要用到判断Token是否存在的行为丢失。

2. 造成这一问题的原因：

表面原因是因为token没有携带给服务器，无法将携带Token的ajax请求发送，导致页面无法渲染服务器返回的数据，更深层次的原因为Vuex存储数据并非持久化的，store里的数据是保存在运行内存中，页面一旦刷新，Vue实例将重新加载，store里面的数据就会变成初始值，也就是导致Token值为空串。

3.解决方法就是采用第二种写法，因为我们token也是动态的，所以我们可以使用计算属性动态获取：

1.  
   写法一：
2.  
    
3.  
   <template>
4.  
   <div>
5.  
   <el-upload
6.  
   class="upload"
7.  
   :action="actionUrl"
8.  
   :on-success="handleUploadSuccess"
9.  
   :headers="{token:token}"
10.  
    :show-file-list="false"
11.  
    >
12.  
    <el-button size="small">
13.  
    <i class="el-icon-upload el-icon--left">点击上传</i>
14.  
    </el-button>
15.  
    </el-upload>
16.  
    </div>
17.  
    </template>
18.  
     
19.  
    <script>
20.  
    export default {
21.  
    data() {
22.  
    return {
23.  
    };
24.  
    }，
25.  
    computed:{
26.  
    token(){
27.  
    return this.$store.state.authToken;
28.  
    }
29.  
     
30.  
    },
31.  
    </script>

4. 一些其他解决方法，仅供参考：

 1）本地存储：将非持久化存储变为持久化存储

可以将仓库中token的初始值设置为localStorage.getItem('token'),这样初始值在没有进行本地存储前依旧为空串，这样在页面挂载时便可以使用本地存储中的token。需要注意的是，其他模块在挂载时也需向服务器发送带token的请求，否则无法获取本地存储的token，可以将请求放在app组件中进行统一发送。

2）将token存入sessionStorage、cookie中，但是cookie中能存储的字符串有限，不适用较大空间的存储，sessionStorage存储的数据在浏览器关闭之后会被清除，根据我的实际需要，选择使用本地存储

3）使用一个用于 vuex 在页面刷新之间处理和存储状态的插件 vuex-persistedstate 。在创建仓库时需要引入和注册

1.  
   import createPersistedState from 'vuex-persistedstate'
2.  
    
3.  
   const store = new Vuex.Store({
4.  
   // ...
5.  
   plugins: [
6.  
   createPersistedState()
7.  
   ]
8.  
   })

这篇好文章是转载于：学新通技术网