Vue使用el-upload上传JSON,TXT文件解析后进行传递

关注

原创 2022-07-20 15:30:42 4.2k 阅读 AI 写同款· GEO 优化 ›

vue上传txt文件和下载文件为txt 需求：点击上传txt文件，先读取txt文件中的内容进行展示。上传使用的是element的upload如下： <el-upload action="/" ref="upload" accept=".txt" :before-upload="beforeUpload" :disabled="this.fileList.length !== 0" :default-fi 阅读详情

<template>
  <div>
    <el-upload
      action
      :on-change="updateReason"
      :auto-upload="false"
      accept=".json"
      list-type="multipart/form-data"
    >
      <el-button size="small" type="primary">阶段原因上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传JSON文件</div>
    </el-upload>
  </div>
</template>
<script>
import http from '../../lib/http' //(封装的axios)
export default {
  data() {
    return {
      fileList: [],
    }
  },
  methods: {
    updateReason(file, fileList) {
      this.fileTransmit(file, fileList)
    },
    fileTransmit(file, fileList, isShow) {
      this.fileList = fileList
      var reader = new FileReader() //新建一个FileReader
      reader.readAsText(file.raw, 'UTF-8') //读取文件
      reader.onload = async function(evt) { //读取文件完毕执行此函数
        let dataJson = JSON.parse(evt.target.result)
        let apiUrl = 'http://11.2.180.225:3003/searchplat/sample/user/updateReason'

        let { data } = await http.post(apiUrl, { json: dataJson })
        console.log(data)
      }
    },
  },
}
</script>