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

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值