【elementUI】el-upload上传文件以及请求头设置

在Element UI中，使用el-upload组件可以方便地上传文件。以下是一个简单的例子，展示如何设置请求头并上传文件：

<template>
  <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    :headers="customHeaders"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      customHeaders: {
        'Authorization': 'Bearer YOUR_TOKEN', // 替换为你的token
        'Custom-Header': 'value' // 其他自定义请求头
      }
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('文件上传成功', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.error('文件上传失败', err, file, fileList);
    }
  }
};
</script>

在这个例子中，我们设置了customHeaders来添加请求头，包括Authorization（令牌认证）和一个自定义头。action属性是上传文件的服务器地址，可以根据实际情况进行修改。handleSuccess和handleError方法用于处理文件上传成功和失败的情况。记得替换YOUR_TOKEN为你的实际令牌。