前端上传图片和文件给服务器的几种方式

76 阅读2分钟

使用组件库:

  • 例如使用 elementel-upload 组件去上传,但需要注意其中的 action 属性在开发环境和生产环境需要分别使用相对应的后端接口。
  • 可以使用 process.envimport.meta.env 中自己定义的环境变量来区分环境。

也可以用 <input type="file"/>,利用input的DOM对象中的files属性拿到文件,将其转换为后端需要的格式传递给后端。以下是常用到的四种格式:

  • tip:浏览器会自动推断接口数据类型;所有利用二进制流和formData传递文件时可以不显示设置接口请求头: 'Content-Type': 'application/octet-stream'       application/x-www-form-urlencoded
  1. 表单数据(Form Data)
    利用 js中formData api    new FormData() 和 append() 方法将 file 放入formData 对象中,将其传递给后端

    • tip:type为file的input上传图片的时候可以利用 URL.createObjectURL(file.raw) 临时展示图片,当点击确认按钮的时候在调用接口。
  2. JSON 数据
    前端可以将文件以Base64编码的方式包含在JSON对象中,然后将该JSON对象发送到后端。后端需要解码Base64数据并保存文件。
    JSON 数据的示例:

    jsonCopy code
    {
      "file": "base64-encoded-file-data-here"
    }
    

    后端必须解码Base64数据并将其还原为文件,这通常涉及到将数据写入磁盘。

  3. 直接二进制数据
    利用 js中blob api   将 file 放入blob 对象中,将其传递给后端

  4. WebSocket 数据

    如果使用WebSocket进行文件上传,前端可以将文件数据分块发送到WebSocket服务器。WebSocket服务器将文件数据收集并保存为文件。

    这种方法允许文件上传的实时进度跟踪,并支持大文件上传。

这些是一些常见的文件上传数据格式。选择哪种格式取决于你的项目需求以及前后端之间的通信方式。在处理文件上传时,请确保在前后端之间进行正确的数据传递和解析以确保文件能够被成功保存和使用。