后来排查出原因是应该是解析成了字符串，然后数值变了。所以解析不出来。 后来使用fromCharCode()方法编辑成字符串形式传输给后台。在使用charCodeAt()取值。
此方法已弃用 protobufferTest () { var message = new messages.Person() // 调用Person对象 实例化 // 赋值 message.setId(23) message.setName('asd') // 序列化 var bytes = message.serializeBinary() console.log(bytes) // Uint8Array(7) [8, 23, 18, 3, 97, 115, 100] var tests = '' for (let index = 0; index < bytes.length; index++) { tests += String.fromCharCode(bytes[index]) } console.log(tests) // asd // 存入FormData let uploadDatas = new FormData() uploadDatas.append('protobuf', tests) // 使用axios传输给后台 this.axios.post('/test', uploadDatas) .then(function (response) { // 将传回的字符串转为数组 console.log(response.data.split('')) // ["↵", "", "3", "2", "", "", "a", "s", "d", "f"] let str = response.data.split('') let toChar = [] for (let index = 0; index < str.length; index++) { toChar.push(str[index].charCodeAt()) } console.log(toChar) // [10, 2, 51, 50, 18, 4, 97, 115, 100, 102] // 后台传回来的是PersonTree里面的值所以调用PersonTree来反序列化 var message2 = messages.PersonTree.deserializeBinary(toChar) console.log(message2) // proto.PersonTree {wrappers_: null, messageId_: undefined, arrayIndexOffset_: -1, array: Array(3), pivot_: 1.7976931348623157e+308, …} // 获取PersonTree的id值 console.log(message2.getId()) // 32 }) .catch(function (error) { console.log(error) }) }
以上方法可能存在安全隐患。 向后端传值 因为FormData支持两种方式传输string和blob所以将bytes存入blob中 前端获取数据 对axios的默认传输方式做个更改 axios.defaults.responseType = 'arraybuffer' 将以上的JS代码更改为以下内容
protobufferTest () { var message = new messages.Person() message.setId(23) message.setName('asd') var bytes = message.serializeBinary() console.log(bytes) let uploadDatas = new FormData() var blob = new Blob([bytes], {type: 'application/octet-stream'}) uploadDatas.append('protobuf', blob) this.axios.post('/test', uploadDatas) .then(function (response) { console.log(response) var message2 = messages.PersonTree.deserializeBinary(response.data) console.log(message2.getId()) }) .catch(function (error) { console.log(error) }) // console.log(bytes) }
至此前后联调完成