写出基于vue和element的文件上传并把上传的文件转换为二进制的json数据的完整代码
时间: 2024-05-27 10:12:29 浏览: 16
以下为基于vue和element的文件上传并将上传的文件转换为二进制的json数据的完整代码:
<template>
<el-upload
action="your-upload-url"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:show-file-list="false"
:headers="headers"
>
<el-button slot="trigger">点击上传文件</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
headers: {
// 设置请求头信息
'Content-Type': 'multipart/form-data',
},
};
},
methods: {
beforeUpload(file) {
// 文件上传前的操作
const formData = new FormData;
formData.append('file', file);
this.$http.post('your-api-url', formData).then((res) => {
// 返回的url存储到数据库中
console.log(res.data.url);
});
return false;
},
handleSuccess(file) {
// 文件上传成功后的操作
let reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = () => {
const data = {
filename: file.name,
type: file.type,
size: file.size,
content: reader.result.split(',')[1],
};
// 将文件转换为二进制json数据
console.log(data);
};
},
},
};
</script>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)