el-upload上传的文件流添加headers
时间: 2023-03-24 09:04:25 浏览: 70
可以使用 before-upload 属性,在上传前对文件进行处理,添加 headers。具体实现可以参考以下代码:
<el-upload
class="upload-demo"
action="/upload"
:before-upload="handleBeforeUpload"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success">上传文件</el-button>
</el-upload>
methods: {
handleBeforeUpload(file) {
const headers = {
Authorization: 'Bearer ' + localStorage.getItem('token')
};
this.$refs.upload.uploadFiles[].headers = headers;
}
}
相关问题
el-upload 上传 文件格式
el-upload组件可以通过accept属性来限制上传文件的格式。例如,如果我们只想上传txt和mc格式的文件,可以这样设置accept属性:accept=".txt,.mc"。这样,el-upload组件就会自动过滤掉其他格式的文件,只允许上传txt和mc格式的文件。
以下是一个el-upload上传文件格式的示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:headers="{'Authorization': 'Bearer ' + token}"
:accept=".txt,.mc"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
token: 'your-token'
};
},
methods: {
handleSuccess(response, file, fileList) {
console.log(response); },
handleError(err, file, fileList) {
console.log(err);
},
beforeUpload(file) {
console.log(file);
}
}
};
</script>
```
在上面的代码中,我们设置了accept属性为".txt,.mc",这样el-upload组件就只允许上传txt和mc格式的文件。同时,我们还设置了on-success、on-error和before-upload等事件处理函数,用于处理上传成功、上传失败和上传前的逻辑。
el-upload上传文件二进制
el-upload 是一个基于 Element UI 组件库的文件上传组件,它支持多种上传方式,包括二进制方式上传文件。在使用二进制方式上传文件时,需要将文件转换成二进制流,并将其作为请求的数据发送给后端服务器。以下是 el-upload 二进制上传文件的简单示例代码:
```
<template>
<el-upload
action="/upload"
:headers="{
Authorization: 'Bearer ' + token
}"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button>点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
console.log(response)
},
beforeUpload(file) {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (event) => {
const binary = event.target.result;
file.binary = binary; // 将二进制数据存储在文件对象上
};
}
}
}
</script>
```
在这个示例中,我们使用 `FileReader` 对象将文件转换为二进制流,然后将其存储在文件对象上。当文件上传时,将会把二进制数据作为请求的数据发送给服务器。