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) },