Vue3 Element Plus 中 el-upload 组件 headers 更新问题解决方案

<template>
  <el-upload
    ref="upload"
    :headers="headers"
    :action="uploadUrl"
    :on-success="onUploadSuccess"
  >
    <el-button>点击上传</el-button>
  </el-upload>
</template>
<script>
import { reactive, onMounted } from 'vue';

export default {
  setup() {
    const headers = reactive({}); // 创建响应式的headers对象

    // 在需要更新headers时，修改它的值
    function updateHeaders(newHeaders) {
      Object.assign(headers, newHeaders);
    }

    // 上传成功的回调函数
    function onUploadSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
    }

    onMounted(() => {
      // 初始化headers
      updateHeaders({
        Authorization: 'Bearer token123',
      });
    });

    return {
      headers,
      updateHeaders,
      onUploadSuccess,
    };
  },
};
</script>
<p>在上面的示例中，我们使用<code>reactive</code>函数创建了一个名为<code>headers</code>的响应式对象。然后，我们创建了一个名为<code>updateHeaders</code>的函数，用于更新<code>headers</code>的值。在<code>onMounted</code>钩子中，我们初始化了<code>headers</code>的初始值。</p>
<p>当<code>headers</code>发生变化时，只需调用<code>updateHeaders</code>函数并传入新的<code>headers</code>对象，<code>el-upload</code>组件会自动响应并更新<code>headers</code>。</p>