vueはローカルファイルを操作できますか?

vue はローカルファイルを操作できます 操作方法は、 1.「XMLHttpRequest」を使用してローカルファイルを読み込み、 2.「input」タグを使用してファイルをアップロードし、「FileReader」オブジェクトを使用して非同期で実行します。 api 、ファイル内のデータを読み取ります。

#このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue はローカル ファイルを操作できますか? ＃＃＃＃＃＃＃＃＃＃＃＃できる。

#Vue プロジェクトは、ローカル ファイルのコンテンツを読み取ってコンテンツを表示します

企業プロジェクトでは、ログインする前に顧客定義のプロジェクト タイトルを実装する必要があります。まだログインしていないため、バックエンド管理システムを通じて設定することはできません。 最初に思いつくのは、ローカル ファイルの内容を読み取ってタイトルの内容を表示する方法です。 お客様はタイトルを変更する必要がある場合、ローカル ファイルの内容を直接変更できます。

ローカル ファイルを読み取るために

---

を実装するには 2 つの方法があります。1 つ目は XMLHttpRequest を使用する方法で、2 つ目は input type=file を使用してファイルは最初にアップロードされてから読み取られます。

最初のタイプ:

XMLHttpRequest を使用してローカル ファイルを読み取ります。HTML ドキュメントの形式がストリームの読み取り形式設定と一致している必要があることに注意してください。一貫して、コードは次のとおりです:

methods: {
  readFile(filePath) {
    // 创建一个新的xhr对象
    let xhr = null
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      // eslint-disable-next-line
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    const okStatus = document.location.protocol === 'file' ? 0 : 200
    xhr.open('GET', filePath, false)
    xhr.overrideMimeType('text/html;charset=utf-8')
    xhr.send(null)
    return xhr.status === okStatus ? xhr.responseText : null
  },}

まず、ファイルのコンテンツを読み取る関数 readFile を作成します。XMLHttpRequest オブジェクトを通じて、指定されたパスにあるファイルを読み取り、形式を text/html として指定し、コンテンツ。

次に、作成したログインコンポーネントのフック関数でファイルの内容を直接呼び出して読み込み、表示したいtitle属性に代入します。

  created() {
    this.getList()
    this.title = this.readFile('../../../static/title.txt')
    console.log(this.title)
  },

このプロジェクトの要件は、このソリューションを使用して解決されます。

2 番目のタイプ:

---

input タグを使用してファイルをアップロードし、h5 が提供する FileReader オブジェクトと非同期 API を使用してデータを読み取ります。ファイル。 rree 推奨される学習: 「vue ビデオ チュートリアル

」

以上がvueはローカルファイルを操作できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。