如何通過(guò)js獲得相對(duì)路徑文件

已知一個(gè)相對(duì)路徑文件，如何使用js將該文件讀取為File格式，最后上傳到服務(wù)器中呢。

1.最簡(jiǎn)單的解決方案——fetch

代碼

import './index.scss'

// js通過(guò)相對(duì)路徑獲取文件
function FetchGetLocalFile() {
  const fetchLocalFile = (path: string) => {
    // 使用fetch API加載圖片文件
    fetch(path)
      .then(function (response) {
        return response.blob() // 獲取圖片文件的二進(jìn)制數(shù)據(jù)
      })
      .then(function (blob) {
        // 獲取文件名
        let temp: any = path?.split('/')
        let name = temp[temp?.length - 1]
        // 創(chuàng)建File對(duì)象
        let file = new File([blob], name, { type: blob.type })
        console.log('通過(guò)fetch讀取的本地文件', file)
      })
      .catch(function (error) {
        console.log('加載文件失敗:', error)
      })
  }
  return (
    <div>
      <h1 className="h1-color">js通過(guò)相對(duì)路徑獲取文件</h1>
      <button onClick={() => fetchLocalFile('/src/components/fetch-get-local-file/luffy.png')}>獲取文件</button>
    </div>
  )
}

export default FetchGetLocalFile

結(jié)果

2. File

File() 構(gòu)造器創(chuàng)建新的 File 對(duì)象實(shí)例(文件對(duì)象)

語(yǔ)法

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

參數(shù)

• bits

  一個(gè)包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 對(duì)象的 Array — 或者任何這些對(duì)象的組合。這是 UTF-8 編碼的文件內(nèi)容。

• name

  表示文件名稱，或者文件路徑。

• options 可選

  選項(xiàng)對(duì)象，包含文件的可選屬性。可用的選項(xiàng)如下：

  • type: 表示將要放到文件中的內(nèi)容的 MIME 類型。默認(rèn)值為 "" 。
  • lastModified: 數(shù)值，表示文件最后修改時(shí)間的 Unix 時(shí)間戳（毫秒）。默認(rèn)值為 Date.now()。

每個(gè)File類型對(duì)象都有有些只讀屬性

• name：本地系統(tǒng)中的文件名
• size：以字節(jié)計(jì)的文件大小
• type：包含文件MIME類型的字符串
• lastModifiedDate：表示文件的最后修改時(shí)間

File接口基于Blob，稍后將介紹Blob

File 接口沒(méi)有定義任何方法，但是它從 Blob 接口繼承了以下方法：

• Blob.slice
  • Blob.slice([start[, end[, contentType]]])
• 返回一個(gè)新的 Blob 對(duì)象，它包含有源 Blob 對(duì)象中指定范圍內(nèi)的數(shù)據(jù)。

3. Blob

binary large object：二進(jìn)制大對(duì)象

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取，也可以轉(zhuǎn)換成 ReadableStream 來(lái)用于數(shù)據(jù)操作。

Blob 表示的不一定是 JavaScript 原生格式的數(shù)據(jù)。File 接口基于 Blob，繼承了 Blob 的功能并將其擴(kuò)展以支持用戶系統(tǒng)上的文件。

打印出的Blob對(duì)象：詳細(xì)說(shuō)明

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

4. fetch

Fetch API 提供了一個(gè) JavaScript 接口，用于訪問(wèn)和操縱 HTTP 管道的一些具體部分，例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch() 方法，該方法提供了一種簡(jiǎn)單，合理的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。

用法

fetch()接受一個(gè) URL 字符串作為參數(shù)，默認(rèn)向該網(wǎng)址發(fā)出 GET 請(qǐng)求，返回一個(gè) Promise 對(duì)象。

基本示例

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

fetch()接收到的response是一個(gè) Stream 對(duì)象，因此只能被讀取一次，更多用法見(jiàn)Fetch API

總結(jié)

到此這篇關(guān)于js獲得相對(duì)路徑文件并上傳到服務(wù)器的文章就介紹到這了,更多相關(guān)js獲得相對(duì)路徑文件并上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！