<!--
关于组件的部分属性:
action:上传的地址,和axios没关系,elementui自己发请求
:show-file-list:是否显示上传的文件列表
:on-success:上传成功的回调
:on-error:上传失败的回调
:before-upload:上传之前的回调,可以在这里检测文件类型和大小,还可以给额外参数赋值要带到服务器的数据
imageUrl:上传成功后返回图片的服务器地址,用于回显图片,预览
http-request:自定义上传的方法回调,参数会传入文件的相关信息
注意:action虽然不用到它但是一定要写个空值 不然会报错
-->
<el-upload
action=""
class="upload-demo"
:show-file-list="false"
:http-request="upload"
>
<el-button type="primary"
>上传<i :class="'el-icon-' + uploadStatusIcon"></i
></el-button>
<span class="filename" v-if="fileName">{{ fileName }}</span>
</el-upload>
<script>
import { uploadCoverFile } from '@/api/repository'
export default {
name: 'Repository',
data () {
return {
uploadStatusIcon: 'upload',
fileName: ''
}
},
methods: {
// 自定义上传
async upload (files) {
// files.file.type文件类型
// files.file.size文件大小(字节)
// files.file.name文件名
// 上传之前可以根据以上属性来判断文件是否合法,这里就跳过了
// 创建formData对象
const formData = new FormData()
// 添加要上传的文件名和文件对象,key就是你上传文件的字段名
formData.append('cover_file', files.file)
this.uploadStatusIcon = 'loading'
// 调用接口上传 传入formData
await uploadCoverFile(formData)
this.uploadStatusIcon = 'success'
this.fileName = files.file.name
}
}
}
// 这是文件上传的api
const uploadCoverFile = data => {
return _ajax({
url: '/admin/lexicon_manager/upload_cover_file',
data
})
}
</script>
后端是用的springmvc的mutipart对象上传的,前端axios,使用formData包装file对象,注意不需要再设置content-type为multipart/form啥的,formData对象上传默认就是这个格式,不需要再设置headers