JavaScript 获取相对路径文件并上传服务器的方法

探讨利用JavaScript获取相对路径文件的方法

阐述如何将已知的相对路径文件读取为File格式，进而上传至服务器。

方案一：采用fetch方式

代码示例

import './index.scss'

// js通过相对路径获取文件
function FetchGetLocalFile() {
  const fetchLocalFile = (path: string) => {
    // 使用fetch API加载图片文件
    fetch(path)
      .then(function (response) {
        return response.blob() // 获取图片文件的二进制数据
      })
      .then(function (blob) {
        // 获取文件名
        let temp: any = path?.split('/')
        let name = temp[temp?.length - 1]
        // 创建File对象
        let file = new File([blob], name, { type: blob.type })
        console.log('通过fetch读取的本地文件', file)
      })
      .catch(function (error) {
        console.log('加载文件失败:', error)
      })
  }
  return (
    <div>
      <h1 className="h1-color">js通过相对路径获取文件</h1>
      <button onClick={() => fetchLocalFile('/src/components/fetch-get-local-file/luffy.png')}>获取文件</button>
    </div>
  )
}

export default FetchGetLocalFile

运行结果

方案二：File对象

利用File()构造函数实例化新的File对象（即文件对象）。

语法定义

const myFile = new File(bits, name[, options]);

参数说明

• bits

  由ArrayBuffer、ArrayBufferView、Blob或DOMString对象组成的数组，或上述对象的任意组合，代表UTF-8编码的文件内容。

• name

  定义文件的名称或文件路径。

• options 可选

  包含文件可选属性的选项对象，具体可用选项如下：

  • type：指定放入文件内容的MIME类型，默认值为""。
  • lastModified：数值型，表示文件最后修改时间的Unix时间戳（毫秒），默认值为Date.now()。

每个File类型对象均具备若干只读属性

• name：本地系统中的文件名
• size：以字节计数的文件大小
• type：包含文件MIME类型的字符串
• lastModifiedDate：表示文件的最后修改时间

File接口基于Blob，后续将介绍Blob

File 接口未定义任何方法，但继承自Blob接口的以下方法：

• Blob.slice
  • Blob.slice([start[, end[, contentType]]])
• 返回一个新的Blob对象，其中包含源Blob对象中指定范围的数据。

方案三：Blob对象

binary large object：二进制大对象

Blob 对象代表一个不可变、原始数据的类文件对象。其数据可按文本或二进制格式读取，亦可转换为ReadableStream以进行数据操作。

Blob 表示的数据未必是JavaScript原生格式。File 接口基于Blob，继承了Blob的功能并扩展以支持用户系统上的文件。

打印出的Blob对象：详细说明

部分读取使用Blob.slice([start[, end[, contentType]]])

方案四：fetch API

Fetch API 提供JavaScript接口，用于访问和操作HTTP管道的具体部分，如请求和响应。同时提供全局fetch()方法，以简单合理的方式跨网络异步获取资源。

用法示例

fetch()接受URL字符串作为参数，默认向该网址发出GET请求，返回Promise对象。

基本示例

fetch(url)
    .then((response)=>{})
    .catch((err)=>{})

fetch()接收到的response为Stream对象，故仅能读取一次，更多用法请参阅Fetch API文档。

总结

至此，关于js获得相对路径文件并上传到服务器的文章介绍完毕，更多相关js获得相对路径文件并上传内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！