在这里插入代码片https://blog.csdn.net/qq_36709020/article/details/90667971
1、上传文件用到Content-Type：multipart/form-data

1、默认的Content-Type：application/json

二、elementui自定义上传文件

<el-upload
          ref="upload"
          class="upload-demo"
          action="#"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :http-request="beforeUpload"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传文件，且不超过 500kb</div>
          </template>
        </el-upload>

const beforeUpload = async (file) => {
  console.log('file', file)
  let fileObject = file.file
  let pic = new FormData()
  pic.append('file', fileObject)
  pic.append('id', state.rowId) //其他参数
  await filesUpload(pic) //代理
  // axios({
  //   method: 'post',
  //   url: url,
  //   data: pic,
  //   config: config,
  // })
  //   .then((response) => {
  //     console.log(response)
  //   })
  //   .catch((error) => {
  //     console.log(error)
  //   })
}

自定义上传方式2

        <el-upload
          class="upload-demo"
          drag
          :auto-upload="false"
          action=""
          :on-change="handleFileChange"
          :before-upload="beforeUpload"
          :file-list="fileList"
          accept=".zip"
          ref="upload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">点击上传文件或者拖拽到此处（.zip）</div>
        </el-upload>

js部分：

  methods: {
  	//获取文件file对象，并保存到this.formFile.file
    handleFileChange(file, fileList) {
      this.fileList = fileList
      this.formFile.file = file.raw // 获取原始文件对象
    },
    //此方法用于文件格式、大小等的校验
    beforeUpload(file) {
      /* const isZip = file.type === 'application/x-zip-compressed'
      if (!isZip) {
        this.$message.error('上传文件只能是 zip 格式!')
        return false
      } */
      return true
    },
    //点击按钮 开始文件上传
    onFileUpload({ key, id, obj }) { //参数非必须
      let successMsg = 'model.notify.addModelSuccess'
      let failMsg = 'common.notify.uploadFilesFail'
      const formData = new FormData()
      formData.append('file', this.formFile.file)
      formData.append('fileModule', 2)
      formData.append('resourceId', obj)
      fileInfoUpload(formData, id).then(res => {
        notify.close(key)
        const { code, msg } = res.data
        if (code === '1') {
          notify.success(this.$t(successMsg))
          this.$refs.tableRef.handleResetSearchParams()
        } else {
          notify.error(this.$t(failMsg), msg)
        }
      })
    },
  }

axios方法 fileInfoUpload的封装

import axios from 'axios'
import { getToken } from '@/utils/auth'
export function fileInfoUpload(formData, id) {
  const instance = axios.create({
    headers: {
      //'Content-Type': 'multipart/form-data', //非必须
      'X-Auth-Token': getToken(), //必须，注意token名称和获取方式
      'X-Upload-Log': id //非必须
    }
  })
  return instance.post('/api/fileInfo/upload.do', formData)
}

三、使用action自动上传

        <el-upload
          ref="upload"
          class="upload-demo"
          action="/citySystemApi/municipal/files/upload"  //citySystemApi是代理的前缀，会自动代理到配置的url
          :data="{ id: rowId }" //额外参数id
          :headers="{ accessToken: accenToken }" //请求头添加token
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :on-progress="onProgress"
          :on-success="onSuccess"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

    const onSuccess = (response, file, fileList) => {
      console.log(1166, response)
      const { data } = response
      console.log(file)
      console.log(fileList)
    }
    const onProgress = (event, file) => {
      console.log(1145, event)
      console.log(file)
    }

“Content-Type” 是一个常用的 HTTP 请求头信息，它指明了请求的 body 数据的类型和编码方式
content-type的值有以下几种

是的，Content-Type 还有许多其他的值，下面列举了几种常见的类型及使用情况：
"application/json;charset=utf-8"："application/json" 指的是 JSON 类型的数据，"charset=utf-8" 则表示数据的编码格式为 UTF-8。

application/x-www-form-urlencoded: 该类型数据的格式和 query string 类似，适用于表单形式数据的请求，例如提交普通表单数据。

multipart/form-data: 该类型数据适用于上传文件的场景，常用于表单文件上传等操作。

text/xml: 表示发送的请求体中是 XML 格式的数据。

text/html: 表示发送的请求体中是 HTML 的内容。

image/jpg,image/gif,image/png: 分别表示 JPG、GIF 和 PNG 格式的图片。

除此之外，还有许多非官方的媒体类型，开发者可以根据需求进行选定。在实际应用中，正确设置 Content-Type 可以帮助服务器正确地处理请求体数据，并返回正确的响应结果。