一、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()
]
})