我是靠谱客的博主 优秀书本,最近开发中收集的这篇文章主要介绍文件上传#如何将文件类型的数据转换成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类型的数据(二进制流)传递给后端人员前言一、怎样获取文件并转换成二进制流传递给后端?总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(47)

评论列表共有 0 条评论

立即
投稿
返回
顶部