vue通过el-upload组件上传文件到服务器使用总结
1.业务需求：
- vue项目需要通过elementUI的el-upload组件上传文件，但是一般情况下请求接口是需要携带token值的，如果不携带则上传不成功，而el-upload是通过 action 属性来设置请求地址的，所以要处理请求头就需要处理headers属性。
2.解决方案：
-
HTML如下（这是比较全面的写法，其中：action属性是自定义上传地址；headers属性是自定义请求头，比如携带token等；limit属性是上传个数限制；file-list属性是多个文件上传时所在的list）：
-
<el-form-item>
<el-upload
class="upload-demo"
:action="base2"
:headers="upHeaders"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList">
<i class="el-icon-upload"><span> 导入文件</span></i>
</el-upload>
-
上传生命周期函数如下
-
// 删除文件钩子
handleRemove(file, fileList) {
console.log(file, fileList)
},
// 已上传文件钩子
handlePreview(file) {
console.log(file)
},
// 文件上传前的钩子(这里可以对文件上传时的后缀进行限制)
beforeUpload(file) {
var FileExt = file.name.replace(/.+\./, '')
if (['json', 'JSON'].indexOf(FileExt) === -1) {
this.$message({
type: 'warning',
message: '请上传后缀名为 json 的文件！',
})
return false
}
},
// 上传文件个数限制钩子
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
},
// 删除文件前的钩子
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
// 上传失败钩子
handleError(err, file, fileList) {
this.$message.error(err.errormsg)
},
// 上传成功钩子(在这里可以处理上传成功后端返回的数据)
handleSuccess(rep, file, fileList) {
console.log(req)
},
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
