当前位置:   article > 正文

vue上传文件后回显文件内容_前端 vue上传文件到表格后显示的是链接

前端 vue上传文件到表格后显示的是链接

vue

  1. <el-upload drag action="#" :multiple=multiple ref="upload" list-type="file"
  2. :show-file-list="false" :http-request="uploadFa" :before-upload="beforeExcelUpload">
  3. <i class="el-icon-upload"></i>
  4. <div class="el-upload__text">将.fa或者.fasta文件拖到此处,或<em>点击上传</em></div>
  5. <div class="el-upload__tip" slot="tip">只能上传.txt文件或.fa文件</div>
  6. </el-upload>
  1. uploadFa(item) {
  2. this.readFile(item.file)
  3. // 处理文件上传
  4. },
  5. readFile(file) {
  6. console.info(file.name)
  7. const reader = new FileReader()
  8. reader.onload = e => this.$emit('load', this.dealNum(e.target.result))
  9. reader.readAsBinaryString(file)
  10. },
  11. dealNum(item) {
  12. console.log(item)
  13. // 将item展示到需要地方
  14. },
  15. beforeExcelUpload(file) {
  16. const isLt200K = file.size / 1024 < 200
  17. if (!isLt200K) {
  18. this.$message.error('上传文件大小不能超过 200k!')
  19. }
  20. return isLt200K
  21. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/木道寻08/article/detail/1017089
推荐阅读
相关标签