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

待我称王封你为后i 2022-10-19 04:23 325阅读 0赞

`在这里插入代码片`https://blog.csdn.net/qq\_36709020/article/details/90667971  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]

二、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)
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20221005/443be8eaa2b44372a8e5ab12a43fa353.png