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