色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue ajax上傳excel

吉茹定2年前10瀏覽0評論

本文將介紹Vue Ajax上傳Excel文檔的方法。Ajax是一種無需頁面刷新的技術,可通過前后端進行數據交互。Vue是一款流行的JavaScript框架,通過使用Vue和Ajax可以實現Excel文檔的上傳操作。

首先,在Vue中使用Ajax需要先引入axios庫。Axios是一個流行的HTTP請求庫,可以與Vue完美結合,方便我們進行HTTP數據請求操作。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

然后,我們需要在Vue中創建一個事件來上傳Excel文檔。該事件將通過Ajax請求與后端進行交互,從而將Excel文件上傳到服務器。

<template>
<div>
<input type="file" @change="uploadFile" />
</div>
</template>
<script>
export default {
methods: {
uploadFile(event) {
let formData = new FormData();
formData.append("file", event.target.files[0]);
axios.post("/upload", formData).then(response =>{
console.log(response.statusText);
});
}
}
};
</script>

代碼中的uploadFile是我們自己定義的事件,它將文件上傳到服務器。在該事件中,我們首先創建一個FormData對象,然后將文件添加到formData中。將formData傳送到服務器的POST請求中,讓后端進行文件上傳處理。

在后臺處理文件上傳的代碼如下:

var express = require('express');
var multer  = require('multer');
var app = express();
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
});
var upload = multer({ storage: storage })
app.post('/upload', upload.single('file'), function (req, res, next) {
console.log(req.file);
})

代碼中使用multer庫處理POST請求,它將從formData中獲取文件并對其進行存儲。在該代碼中,我們使用destination方法指定文件存儲的目錄。我們還使用filename方法定義了文件名。此代碼中僅僅是輸出了文件信息,但實際應用中,你可以將文件信息存儲在數據庫中。

在上傳Excel文件后,我們可能要繼續對文件進行其他處理,如將數據顯示在表格中。以下代碼可將Excel轉換為JSON并在Vue中顯示為表格。

export default {
data() {
return {
excelData: []
};
},
methods: {
handleFileUpload() {
const file = this.$refs.file.files[0];
const reader = new FileReader();
reader.onload = (e) =>{
const data = e.target.result;
const workbook = XLSX.read(data, {type: 'binary'});
workbook.SheetNames.forEach((sheetName) =>{
const XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
this.excelData = JSON.stringify(XL_row_object);
});
};
reader.onerror = (error) =>console.log(error);
reader.readAsBinaryString(file);
}
}
};

以上代碼使用了SheetJS庫,并使用XLSX庫將Excel文件轉換為JSON格式的數據。我們將數據存儲在一個空數組中,以便在Vue組件中顯示。表格的顯示也應在Vue組件中通過使用v-for循環來實現。

Ok,到這里我們就學會了如何在Vue中使用Ajax上傳Excel文件。此方法可以應用于各種情況,如員工工資單、銷售統計表等,具有廣泛的適用性。