Vueのドメイン間アップロードexcelテーブル

4233 ワード

前後端で分離する項目では、常にいくつかのドメインをまたぐ問題が存在し、項目の先端でvueを用いる.js、バックエンドはthinkphp 5を使用します.くだらないことはあまり言わないで,袖を引っ張って直接やる.ドメイン間の解決策は、サービス側のドメイン間ヘッダの構成です.
フロントエンドの実装:
ページにファイルを選択するボタンを作成し、ボタンをクリックしてchooseFile関数をトリガしてinput[type='file']をシミュレートしてファイルイベントを選択します.Input[type='file']のonchangeイベントを傍受して選択したファイルオブジェクトを取得し、確認インポートボタンをクリックしてupFile関数をトリガーすることでファイルの非同期アップロードを実現します.


   export default {
     name: 'Upload',
     data () {
       return {
         attence: '',
         attenceFile: {}
       }
     },
     methods: {
       chooseFile () {
         this.$refs.attenceInput.click();
       },
       changeFile (e) {
         this.attence = e.target.files[0].name;
         this.attenceFile = e.target.files[0];
       },
       upFile () {
         let filename = this.attenceFile.name;
         let arr = filename.split('.');
         if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
           this.$toast.center('      !');
           return;
         }
         let fileData = new window.FormData();
         fileData.append('file', file)
     let xhr = new window.XMLHttpRequest();
     xhr.open('POST', 'http://localhost:999/base/upload', true);
     xhr.send(fileData);
     xhr.onreadystatechange = () => {
       if (xhr.readyState === 4) {
        if (xhr.status === 200) {
         let response = JSON.parse(xhr.response)
         this.$toast.center(response.message)
        } else {
         let error = this.$emit('upload-error', xhr)
         if (error !== false) {
          this.$toast.center(xhr.statusText)
         }
        }
       }
     }
       }
     }
   }

バックエンド実装:
共通コントローラを構築し、ドメイン間ヘッダを構成
param();
        $this->param = $param;
    }
}
新しいコントローラはファイルのアップロードを処理するために使用され、excelはデータベースのコードをインポートし、リンク項目を参照することができます!
    //excel  
public function loadexcel($file,$name){
    vendor("PHPExcel.PHPExcel");
    $objReader = PHPExcel_IOFactory::createReaderForFile($file);
    $objPHPExcel = $objReader->load($file, $encode='utf-8');
    $sheet = $objPHPExcel->getSheet(0);
    $highestRow = $sheet->getHighestRow();//総行数取得
   //$highestColumn = $sheet->getHighestColumn();//取得総列数
    $data = array();
    $info = array();
ここのコードは省略します.
}
}