VUE + el-upload实现文件上传预览

VUE + el-upload实现文件上传预览

下面展示弹窗代码：

<!-- 导入 -->
        <ems-dialog title="导入" :show="importDialog"  custom-class="ems-dialog" @close="importClosed()">
            <el-form slot="body" :model="importForm" ref="importForm" :rules="rules">
                <el-upload
                    class="upload-demo"
                    ref="uploadfile"
                    action=""
                    :on-change="handleChange"
                    :limit="1"
                    :on-preview="handlePreview"
                    :on-exceed="handleExceed"
                    :auto-upload="false">
                    <el-button size="small" type="primary" style="margin-bottom:15px;">读取excel文件</el-button>
                </el-upload>
                <el-table
                    :data="tableImportData"
                    style="width: 100%;">
                    <el-table-column prop="code1" label=""></el-table-column>
                    <el-table-column prop="code2" label=""></el-table-column>
                </el-table>
            </el-form>
         
          <div slot="btns" class="dialog-footer">
                <el-button type="primary" @click="importSave">导入</el-button>
                <el-button type="primary" @click="importClose">取消</el-button>
            </div>
        </ems-dialog>

下载依赖：
npm install xlsx

js部分：

export default {
data() {
return {

        // 导入
        importDialog: false,
        tableImportData: [],
        fileContent: '',
        file: '',
        data: '',
        importForm: {},
        fileList: [],
        newFile: new FormData(), //   1. 定义一个newFile变量（FormData 对象）  
    }
},
methods: {
    importExcel() {
        this.importDialog = true;
        this.tableImportData = [];
    },
    importClosed() {
        this.importDialog = false;
    },
    importClose() {
        this.importDialog = false;
    },
    // 核心部分代码(handleChange 和 importfile)
    handleChange(file, fileList) {
        console.log(file);
        if (file) {
            this.newFile.append('file', file.raw); //  1. 上传之前，拿到file对象，并将它添加到刚刚定义的FormData对象中。 
        } else {
            return false;
        };
        this.fileContent = file.raw
        const fileName = file.name
        const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
        if (this.fileContent) {
            if (fileType === 'xlsx' || fileType === 'xls') {
                this.importfile(this.fileContent)
            } else {
                this.$message({
                    type: 'warning',
                    message: '附件格式错误，请重新上传！'
                })
            }
        } else {
            this.$message({
                type: 'warning',
                message: '请上传附件！'
            })
        };
    },
    importfile(obj) {
        const reader = new FileReader()
        const _this = this
        reader.readAsArrayBuffer(obj)
        reader.onload = function () {
            const buffer = reader.result
            const bytes = new Uint8Array(buffer)
            const length = bytes.byteLength
            let binary = ''
            for (let i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i])
            }
            const XLSX = require('xlsx')
            const wb = XLSX.read(binary, {
                type: 'binary'
            })
            const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
            this.data = [...outdata]
            const arr = []
            this.data.map(v => {
                const obj = {}
                obj.code1= v.name //对应Excel表第一行name
                obj.code2= v.name  //对应Excel表第一行name
                arr.push(obj)
            })
            _this.tableImportData = _this.tableImportData.concat(arr);
            console.log(_this.tableImportData);
        }
    },
    handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件`);
    },
    handlePreview(file) {
        console.log(file);
    },
    importSave() {
        const newData = this.newFile;
        console.log(newData);
        http({
            method: 'post',
            url: '',
            data: newData,
        })
        .then(res => {
            console.log(res);
            if(res.code == 200){
                this.$message({
                    type: "success",
                    message: "上传成功"
                });
                this.importDialog = false;
            }else{
                this.$message({
                    title: error,
                    message: res.message
                });
            }
            
        })
        .catch(error => {
            this.$message({
                title: error,
                message: "导入失败"
            });
        });
    },
},

}

参考原创作者: 传送门.