前端(ElementUI)
1. 文件上传
- 使用
el-upload
组件
- 配置上传接口
- 处理上传成功和失败
<template>
<div>
<el-upload
class="upload-demo"
action="http://your-server-url/upload"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:show-file-list="true"
:auto-upload="true"
:headers="headers">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
}
};
},
methods: {
handleSuccess(response, file, fileList) {
this.$message.success('文件上传成功');
console.log('上传成功', response);
},
handleError(err, file, fileList) {
this.$message.error('文件上传失败');
console.error