<!-- 
        关于组件的部分属性:
          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