vue上传文件后回显文件内容
vue<el-upload drag action="#" :multiple=multiple ref="upload" list-type="file":show-file-list="false" :http-request="uploadFa" :before-upload="beforeExcelUpload"><i ...
·
vue
<el-upload drag action="#" :multiple=multiple ref="upload" list-type="file"
:show-file-list="false" :http-request="uploadFa" :before-upload="beforeExcelUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将.fa或者.fasta文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传.txt文件或.fa文件</div>
</el-upload>
uploadFa(item) {
this.readFile(item.file)
// 处理文件上传
},
readFile(file) {
console.info(file.name)
const reader = new FileReader()
reader.onload = e => this.$emit('load', this.dealNum(e.target.result))
reader.readAsBinaryString(file)
},
dealNum(item) {
console.log(item)
// 将item展示到需要地方
},
beforeExcelUpload(file) {
const isLt200K = file.size / 1024 < 200
if (!isLt200K) {
this.$message.error('上传文件大小不能超过 200k!')
}
return isLt200K
}
更多推荐
已为社区贡献17条内容
所有评论(0)