编写一个用于上传文件的前端代码

下面是一个基于 Element UI 组件库的上传文件的前端代码示例：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :data="{ username: 'admin' }"
    :headers="{ Authorization: 'Bearer ' + token }"
    :before-upload="handleBeforeUpload"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
    :file-list="fileList"
    multiple
    drag
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      token: 'your_token_here',
    }
  },
  methods: {
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt500K = file.size / 1024 < 500

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }

      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
        return false
      }

      return true
    },
    handleUploadSuccess(response, file, fileList) {
      this.fileList = fileList

      if (response.code === 0) {
        this.$message.success('上传成功')
      } else {
        this.$message.error('上传失败')
      }
    },
    handleUploadError(error, file, fileList) {
      this.fileList = fileList
      this.$message.error('上传失败')
    },
  },
}
</script>

在这个示例中，我们使用了 Element UI 的 el-upload 组件来实现文件上传功能。其中，我们通过配置一些 props 来实现一些基本的功能：

- action：文件上传的 URL。
- data：上传时附带的额外参数。
- headers：上传时附带的请求头。
- before-upload：上传前的校验函数。
- on-success：上传成功的回调函数。
- on-error：上传失败的回调函数。
- file-list：已上传的文件列表。
- multiple：是否支持多文件上传。
- drag：是否支持拖拽上传。

在实际项目中，需要根据具体的需求来配置这些 props。同时，还需要在后端编写相应的接口来处理上传的文件。