vue2 使用el-ipload上传文件并将文件转换成文件流格式并console.log打印出来
时间: 2023-12-14 07:36:44 浏览: 179
【JavaScript源代码】vue el-upload上传文件的示例代码.docx
在 Vue2 中使用 `el-upload` 组件上传文件,并将文件转换成文件流格式可以按照以下步骤实现:
1. 首先需要引入 `el-upload` 组件,可以通过以下方式引入:
```javascript
import { Upload } from 'element-ui'
```
2. 在 Vue 组件中使用 `el-upload` 组件,示例代码如下:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
在上面的代码中,`action` 表示上传文件的服务端地址,`before-upload` 表示上传文件之前的钩子函数,`file-list` 表示已经上传的文件列表,`auto-upload` 表示是否自动上传。
3. 在 `beforeUpload` 钩子函数中,将上传的文件转换成文件流格式并打印出来。示例代码如下:
```javascript
beforeUpload(file) {
// 将文件转换成文件流格式
const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = () => {
const fileStream = new Uint8Array(reader.result)
console.log(fileStream)
}
return false // 阻止自动上传
}
```
在上面的代码中,`FileReader` 对象可以将文件转换成文件流格式,`Uint8Array` 可以将文件流转换成字节数组,最后通过 `console.log` 打印出来。
完整示例代码:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
import { Upload } from 'element-ui'
export default {
components: {
[Upload.name]: Upload
},
data() {
return {
fileList: []
}
},
methods: {
beforeUpload(file) {
// 将文件转换成文件流格式
const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = () => {
const fileStream = new Uint8Array(reader.result)
console.log(fileStream)
}
return false // 阻止自动上传
},
handleSuccess(response, file, fileList) {
console.log(response, file, fileList)
}
}
}
</script>
```
阅读全文