element组件 el-upload自定义上传
在网上看了很多element UI 关于el-upload组件的使用,但是觉得还没有完善,感觉实现不了自己想要的效果,我想实现的是自定义上传,就是将多文件(单文件)拖拽到上传组件上,文件未进行上传,这个时候我还可以对文件进行增删操作,等我不想操作,然后点击上传,才开始上传,所以用element UI的话,那就需要使用自定义上传方式。
<el-upload class="upload-demo" drag ref="upload" action="#" :http-request="dragSubmit" :on-change="handleFileChange" :auto-upload="false" multiple :on-remove="handleRemove" :on-preview="getData" :file-list="file" > <i class="el-icon-upload"></i> <div class="el-upload__text"> 将文件拖到此处,或 <em>点击上传</em> </div> <div class="submit-botton-box"> <el-button v-if="file" type="primary" @click.stop="upload">上传</el-button> </div> </el-upload>
methods:
getData(file) { console.log("file", file); this.tableData = []; this.file2Xce(file).then((tabJson, name) => { if (tabJson && tabJson.length > 0) { tabJson[0].sheet.forEach((item, index) => { this.tableData.push(item); }); } }); },
handleRemove(file, fileList) { console.log(file); console.log(fileList); this.file = []; this.file = fileList; },
handleFileChange(file) { /// 会触发多次 this.file.push(file); //this.file = file.raw; return false; },
file2Xce(file) { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.onload = function(e) { let data = e.target.result; this.wb = XLSX.read(data, { type: "binary" }); let result = []; this.wb.SheetNames.forEach(SheetName => { result.push({ sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[SheetName]) }); }); resolve(result, file.name); }; reader.readAsBinaryString(file.raw, file.name); }); },
dragSubmit(event) { let formData = new FormData(); console.log(this.file); formData.append("file", this.file[0].raw); this.file.splice(0, 1); uploadHttp .post("/api/WarrantReserve/ImportWarrantFile", formData) .then(res => { this.$message.success("上传成功!"); this.tableData = []; }) .catch(() => {}); },
upload() { console.log("上传"); this.$refs.upload.submit(); },