文件上传#如何将文件类型的数据转换成Buffer类型的数据（二进制流）传递给后端人员前言一、怎样获取文件并转换成二进制流传递给后端？总结

106 阅读 0 评论 70 点赞

我是靠谱客的博主优秀书本，这篇文章主要介绍文件上传#如何将文件类型的数据转换成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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
//组件
    <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文档，而是直接找到这个开源组件库的源码，看着别人报错，处理自己的自定义上传代码封装。所以说，再遇见问题的时候，大家，一定要沉着冷静。慢慢思考。！！！也是告诫我自己，问题的解决，慌是没有用滴。