javascript - 上传图片时的 formData 与 JSON(最佳实践)

标签 javascript laravel vue.js axios form-data

JSON 在向服务器发送数据方面似乎比 formData 有很多好处。其中一些包括无需手动 stringfy 即可发送嵌套数据,或者使像下面这样的简单代码成为可能:

data() {
    return {
      form: {},
    }
  },
methods: {
    submit() {
      this.form = await this.$axios.$post('/images', this.form)
    },

无论“表单”对象的结构如何,我都可以轻松地发送它并在服务器中管理 JSON。当我们需要一起发送一些上传的文件时,这种方法的问题似乎就来了。最常见的方法似乎是以 base64 格式发送文件,但这是一种不好的做法,因为它会使文件变大。无论如何,我们可以发送附加到此 JSON 正文的文件而不将其转换为 base64,或者唯一的方法是使用 formData 方法?类似于 multipart-formdata 但带有 JSON?

最佳答案

不,json 内容类型不能附加文件。 对于 API,最好单独上传文件,然后使用文件路径(或磁盘和文件名)将资源与文件相关联。

如果您必须执行单个请求,则它必须采用“formData”形式。

更新: 另一种方法是从客户端将文件编码成base64格式,然后在后端解码(可能会造成质量损失,没试过,只是建议)

关于javascript - 上传图片时的 formData 与 JSON(最佳实践),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71620817/

相关文章:

javascript - 从 console.log 自定义打印?

php - 如何在 php 或 Laravel 中将 Excel 工作表图像上传到数据库

javascript - VueJS - 动态重复组件

php - 无法在 mPdf 中设置横向 - niklasravnsborg/laravel-pdf

php - 为什么 Laravel 的错误屏幕上的信息是隐藏的?

vue.js - 使用 vue.js 从磁盘读取 yaml 文件(不是 URL)

javascript - 无法使用 this.$refs 在 Vue.js 中访问单个元素

javascript - 网格模板列动画

javascript - 计算页面上具有 id 属性的列表元素的数量

javascript - 使用 n :m related objects 上的关联对错误进行后续处理