google-app-engine - 将 base64 字符串数据发送到服务器但收到空表单值

Question

我有一个用 Vue 编写的前端和一个用 Golang 编写的后端。我正在使用 Google 应用引擎来运行我的后端服务，并使用 gcloud datastore 和 gcloud storage 来存储通过前端表单提交的数据和图像。

我一直在尝试使用 POST 方法上传图像。我将图像转换为 base64 字符串。然后我将数据字符串添加到 formdata 并 POST 到我的后端服务。我在 Go 程序中不断得到 empty 表单值。 Go 无法读取 base64 字符串是否有原因，或者我错过了有关 FormData 的一些重要信息？任何帮助都有帮助，谢谢。

我的前端代码:

var myForm = document.getElementById('myForm')
var formData = new FormData(myForm)

var imgBase64 = getBase64(//image-url//)
imgBase64.then(function (res) {
   formData.append('image', res)
}

axios.post(' //go-app-engine-service// ', formData)
.then(res => {
   console.log(res)
 })
.catch(error => {
   console.log(error)
 })

function getBase64(url) {
   return axios
     .get(url, {
        responseType: 'arraybuffer'
     })
     .then(response => Buffer.from(response.data, 'binary').toString('base64'))}

我的 Go 代码:

imgString := r.FormValue("image")
fmt.Printf("imgstring: %s, %d, %T\n", imgString, len(imgString), imgString) //=> getting empty imgString

Answer 1

好的，经过一番研究后，我意识到“范围”问题。函数 getBase64 返回一个 Promise 并且必须处理范围内的值，所以我移动 Promise 中的 axios.post 并且我终于在 Go 程序中看到了 base64 值。问题解决了。

修改后的前端代码:

var myForm = document.getElementById('myForm')
var formData = new FormData(myForm)

var imgBase64 = getBase64(//image-url//)
imgBase64.then(function (res) {
   formData.append('image', res)

   axios.post(' //go-app-engine-service// ', formData)
     .then(res => {
        console.log(res)
     })
     .catch(error => {
        console.log(error)
     })
}