vue文件上传-如何上传？及刷新token丢失问题

一、vue文件上传

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

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

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

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        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'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</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丢失问题。

 写法一：

<template>
<div>
<el-upload
            class="upload"
            :action="actionUrl"
            :on-success="handleUploadSuccess"
            :headers="headers"
            :show-file-list="false"
          >
            <el-button size="small">
              <i class="el-icon-upload el-icon--left">点击上传</i>
            </el-button>
          </el-upload>
</div>
</template>

<script>
export default {
  data() {
    return {
headers: {
   token: this.$store.state.authToken
},
};
}
</script>

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

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

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

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

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

 写法一：

<template>
<div>
<el-upload
            class="upload"
            :action="actionUrl"
            :on-success="handleUploadSuccess"
            :headers="{token:token}"
            :show-file-list="false"
          >
            <el-button size="small">
              <i class="el-icon-upload el-icon--left">点击上传</i>
            </el-button>
          </el-upload>
</div>
</template>

<script>
export default {
  data() {
    return {
};
}，
computed:{
    token(){
      return this.$store.state.authToken;
    }

  },
</script>

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

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

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

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

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

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState()
  ]
})