vue el-upload headers

在Vue中，使用el-upload组件上传文件时可以通过headers属性来设置请求头部。可以在data中定义一个包含Authorization字段的headerObj对象，然后将headerObj作为headers属性的值传递给el-upload组件，如下所示：

<el-upload action="http://127.0.0.1:8888/api/private/v1/upload" :headers="headerObj"></el-upload>

data() {
  return {
    headerObj: {
      Authorization: window.sessionStorage.getItem("token")
    }
  }
}

这样就可以在上传请求中携带token。

相关问题

vue el-upload上传压缩包

以下是使用Vue的elementUI库中的upload组件来上传压缩包的示例代码：

<template>
  <el-upload
    class="upload-demo"
    drag
    accept=".rar,.zip"
    :action="actionUrl"
    :multiple="false"
    :headers="headers"
    :limit="1"
    :on-success="handleUploadSuccess"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传 .rar / .zip 格式文件</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      actionUrl: "your_upload_url",
      headers: {
        Authorization: "your_token"
      }
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 上传成功的回调函数
    },
    handlePreview(file) {
      // 预览文件的回调函数
    },
    handleRemove(file, fileList) {
      // 移除文件的回调函数
    }
  }
};
</script>

在上述代码中，我们使用了`el-upload`组件来创建一个上传文件的区域。通过设置`accept`属性，我们限制只能上传`.rar`和`.zip`格式的文件。`action`属性指定了上传文件的URL，`headers`属性可以设置请求头信息。`limit`属性限制了一次只能上传一个文件。`on-success`、`on-preview`和`on-remove`属性分别指定了上传成功、预览文件和移除文件时的回调函数。

你可以根据自己的需求修改这些配置字段或钩子函数。更多关于`el-upload`组件的详细解释可以在elementUI官网找到。

vue el-upload 上传到oss服务器

可以使用第三方库 `ali-oss` 来完成该功能。具体操作可以参考以下示例代码：

<template>
  <el-upload
    action=""
    :before-upload="beforeUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :headers="{ 'x-oss-security-token': ossToken }"
    :data="{ key: uploadedKey }"
    :file-list="fileList"
    multiple>
    <el-button size="small" type="primary">上传文件</el-button>
  </el-upload>
</template>

<script>
import OSS from 'ali-oss';

export default {
  data() {
    return {
      fileList: [],
      uploadedKey: '',
      ossToken: '',
    };
  },
  methods: {
    async beforeUpload(file) {
      // 获取 OSS Token 
      const response = await this.$http.get('https://example.com/get-oss-token');
      if (response.data.code !== 0) {
        this.$message.error('获取 OSS Token 失败');
        return false;
      }
      this.ossToken = response.data.data;
      
      // 构造上传参数
      const client = new OSS({
        region: 'oss-cn-hangzhou', // OSS Bucket 所在地域
        accessKeyId: 'your-access-key-id',
        accessKeySecret: 'your-access-key-secret',
        stsToken: this.ossToken,
        bucket: 'your-bucket-name',
      });
      const key = `uploads/${file.name}`;
      this.uploadedKey = key;
      const info = await client.multipartUpload(key, file, {
        progress: (p) => {
          console.log(`Progress: ${p}`);
        },
        meta: {
          year: '2022'
        }
      });
    },
    onSuccess(response, file, fileList) {
      this.$message.success('文件上传成功');
    },
    onError(error, response, file) {
      this.$message.error('文件上传失败');
    },
  }
};
</script>

注意：上传过程中需要先获取阿里云的 OSS Token，并且在请求头中加上 `x-oss-security-token` 参数，同时需要设置 OSS 上传参数：Access Key ID，Access Key Secret，STS Token 和 Bucket Name。