不同的content-type请求头传参数方式，elementui上传文件

在这里插入代码片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)
  //   })
}

三、使用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 可以帮助服务器正确地处理请求体数据，并返回正确的响应结果。