ネイティブJSファイルのアップロードとダウンロードパッケージ

まず、ダウンロード

1、コード

constのfileDownloadClick =（OBJ）=> {// ソリューション互換
  IF（document.allの）{ 
    obj.click（）; 
  } {他に
    聞かせてdocument.createEventイベント=（ "のMouseEvents"）; 
    event.initEvent（ 'クリック'、trueに、）trueに、
    obj.dispatchEvent（イベント）; 
  } 
} 
constのFileDownload =（RES、OBJ）=> {//ダウンロード
    / * 
    OBJ：{ 
      userNameのダウンローダ
      weeklyTimeダウンロード時間
      weeklyTypeダウンロードタイプ
    } 
  * / 
  新しい新しいブロブBLOBを=（しましょう[RES]）; 
  せURL = window.URL.createObjectURL（BLOB）; 
  せリンク=のdocument.createElement（ 'A'）; 
  link.style.display = 'なし'; 
  link.href = URL。
  link.setAttribute（ 'ダウンロード'、 `$ {obj.userName || ' '} _ $ {obj.weeklyTime || dateFormatYMD（新しいDate（））} _ $ {obj.weeklyType ||'の.xlsx'}`） ; 
  document.body.appendChild（リンク）。
  // link.click（）; 
  fileDownloadClick（リンク）。
  window.URL.revokeObjectURL（URL）; 
}

図2に示すように、要求ヘッダーの増加のための要求

responseType： 'ブロブ'、

使用して3、

RES：背景返されたファイル・ストリーム（似た文字化けのもの）
OBJ：ダウンロードファイル名

//ページコール
this.fileDownload =（RES、OBJ）

第二に、アップロード（ベースVUE）

1、ページの使用

< 入力タイプ= "ファイル" REF = "アップロード" @change = 'handleUploadChange（$イベント）' スタイル= "表示：なし;" >

handleUploadFile（行）{//イベントによってトリガ

この$レフリー[ 'アップロード']をクリックします（）。。。

}、

非同期handleUploadChange（E）{//

{試します

RES =のawait this.CommonUpload（e）をしましょう。

IF（res.code ==「200」）{//は、与えられた背景に応じて追加のコード値を取得します

this.handleProjectAddFile（res.data）

}そうしないと{}

}

　　　　キャッチ（ERR）{}

　　}

図2に示すように、パッケージの方法は、（唯一のサイズを決定し、またなど、タイプを受信するように受け入れる他の種類によって決定されてもよいです）

CommonUpload（E）{ 
        CONST =ファイルe.target.files; 
        せFORMDATAいるFormData新しい新=（）; 
        IF（ファイル&&ファイル[0]）{ 
            CONST =ファイルファイル[0]; 
            IF（file.size> * 1024×1024 * 3）{ 
                アラート（ 'ファイルサイズが3Mを超えることはできません'）; 
                リターン; 
            }そうでなければ{ 
                formData.append（ "MultipartFile"、ファイル）; 
            } 
        } 
        this.uploadFile_（FORMDATA）//インターフェースメソッドがコールをアップロードします
    }

3、再度ファイルを選択し、同じ問題が、失敗

ソリューション：（アップロードした後、次のコマンドを実行します）
この$レフリー[「アップロード」]値=「」; //二度目は失敗した問題の入力ファイルを解決するために。

理由：
ファイルの値は、選択した入力の新しい値で、次回ので、同じファイルを選択し、それが変更イベントをトリガすることはありません

ネイティブJSファイルのアップロードとダウンロードパッケージ

おすすめ