vue 处理前端文件数据
1 上传文件,转成bas64. 前端用ExcelJs 解析Excel文件内容
<le-dialog :width="'90%'" :title="'节点选择'"
:destroyOnClose="true"
:closeOnClickModal="true" append-to-body
:visible.sync="visible" @close="()=>{visible=false}">
`` <span slot="dialogFooter" class="dialog-footer">
<input
type="file"
id="file"
style="display:none;"
accept="image/*"
/>
<el-button v-if="editModel" @click="pasteByClipboard">粘贴图片</el-button>
<el-button v-if="editModel" @click="uploadDemoPic">{{btnImageTitle}}</el-button>
<el-button @click="buttonClick">{{buttonTitle}}</el-button>
<el-button @click="cancelBtn">关闭</el-button>
<el-upload action="https://jsonplaceholder.typicode.com/posts/"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
:before-upload="importExcelData2"
:show-file-list="false">
<el-button slot="trigger" type="plan" size="mini">导入<i class="el-icon-upload el-icon--right"></i></el-button>
</el-upload>
</span>
</el-dialog>`
<script>
import ExcelJs from "exceljs"
export default {
name: "NodeDesc",
data(){
return {
visible:false,
}
},
methods:{
importExcelData2(file){
const e={target:{files:[file]}}
this.importExcelData(e)
return false
},
async importExcelData(e){
var files = e.target.files;
if (files.length == 0) return;
const workbook = new ExcelJs.Workbook();
await workbook.xlsx.load(files[0])
const worksheet = workbook.getWorksheet(1)
worksheet.eachRow({ includeEmpty: true },(row, rowNumber) =>{
if(rowNumber>1){
const rowItem ={}
const rowValue =row.getCell(1).value
rowItem[this.valueKey]=rowValue
rowItem[this.tagLabel]=row.getCell(2).value
this.tagValues.push(rowItem)
this.value.push(rowValue)
if (this.table.data) {
let index = this.table.data.findIndex((item) => item[this.valueKey] === rowValue)
if (index >= 0) {
this.$refs.table.toggleRowSelection(this.table.data[index]);
}
}
}
})
},
uploadDemoPic(){
document.getElementById("file").click();
},
pasteByClipboard(){
const that =this
navigator.clipboard.read().then(res=>{
console.log('clipboard---',res)
const imageItem = res.find(item=>(item.types[0]+'').indexOf("image/")>-1)
if(imageItem){
imageItem.getType(imageItem.types[0]).then(res=>{
const reader = new FileReader()
reader.onload = () => {
const picData =btoa(reader.result)
that.demoPic ="data:image/png;base64,"+picData
}
reader.readAsBinaryString(res)
})
}else {
this.$message("剪贴板没有可以粘贴的图片")
}
})
},
created() {
},
mounted() {
const that =this
document.getElementById("file").addEventListener("change", function(e) {
var files = e.target.files;
if (files.length == 0) return;
const reader = new FileReader()
reader.onload = () => {
const picData =btoa(reader.result)
that.demoPic ="data:image/png;base64,"+picData
}
reader.readAsBinaryString(files[0])
});
},
}
</script>