我是靠谱客的博主 优秀书本,最近开发中收集的这篇文章主要介绍文件上传#如何将文件类型的数据转换成Buffer类型的数据(二进制流)传递给后端人员前言一、怎样获取文件并转换成二进制流传递给后端?总结,觉得挺不错的,现在分享给大家,希望可以做个参考。
概述
目录
- 前言
- 一、怎样获取文件并转换成二进制流传递给后端?
- 总结
前言
最近项目有个文件上传的功能,需要前端在通过文件上传组件上传文件之后,将获取到的文件,转换成buffer格式(二进制格式)的数据传递给后端。
一、怎样获取文件并转换成二进制流传递给后端?
原始文件的获取,我们这里是通过第三方组件来实现的。这里,以我在项目中用到的第三方组件tdesign上传组件为例,
点击获取文件,就可以在当前的电脑中获取,想要的文件。
组件代码如下:
//组件
<t-upload
v-model="files"
placeholder="批量上传"
theme="file-flow"
:requestMethod="requestMethod"
multiple
:auto-upload="false">
</t-upload>
<script>
export default {
data() {
return {
files: [],
};
},
methods: {
requestMethod(files) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsArrayBuffer(files.raw);//files.raw这个是原始文件对象
reader.onload = function(e) {
try {
let res = e.target.result;//ArrayBuffer
let buf = Buffer.from(res);//Buffer
let json_data = JSON.parse(JSON.stringify(buf));//转换成json,是为了获取buffer里面的data(二进制数据
// 发送上传文件的请求
request({
url: 'xxxx',
method: 'POST',
data: {
file_name: files.name,
file_buf: json_data.data//buffer
}
}).then(res => {
//这里是第三方组件要求的格式
resolve({
status: 'success',
response: {
url: "xxxx"//文件上传成功之后,返回的url
}
})
})
} catch (error) {
//这里是第三方组件要求的格式
reject({
status: 'fail'
})
}
}
})
}
},
};
</script>
总结
怎么说尼,自己还是对这些问题的理解能力不行,最开始就没有搞清楚这个自定义组件到底是怎么封装的,要怎么才能让控制台不报错。我也是够菜的。看不懂这个api文档。
可能是因为太着急了,所以没有好好看,还怪这个文档写的不够清楚。后面才发现,原来别人写的还是很清楚了。我解决这个问题,也不是重新看的API文档,而是直接找到这个开源组件库的源码,看着别人报错,处理自己的自定义上传代码封装。所以说,再遇见问题的时候,大家,一定要沉着冷静。慢慢思考。!!!也是告诫我自己,问题的解决,慌是没有用滴。
最后
以上就是优秀书本为你收集整理的文件上传#如何将文件类型的数据转换成Buffer类型的数据(二进制流)传递给后端人员前言一、怎样获取文件并转换成二进制流传递给后端?总结的全部内容,希望文章能够帮你解决文件上传#如何将文件类型的数据转换成Buffer类型的数据(二进制流)传递给后端人员前言一、怎样获取文件并转换成二进制流传递给后端?总结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复