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

原创已于 2022-07-20 15:30:42 修改 · 4.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #json #elementui

于 2022-02-09 17:04:26 首次发布

这篇文章介绍了如何使用Element UI实现阶段原因的文件上传功能，通过FileReader解析JSON并调用HTTP API更新原因，展示了前端与后端交互的基本步骤。

<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>