上传实现（txt）利用elementui

最新推荐文章于 2023-03-25 17:28:13 发布

雲墨知秋

最新推荐文章于 2023-03-25 17:28:13 发布

阅读量431

点赞数

文章标签： elementui javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_58175658/article/details/129640149

版权

该段代码展示了如何利用ElementUI的changeFile方法处理TXT文件上传。通过FileReader读取文件内容，然后使用axios以POST方式发送到后台，数据格式化为x-www-form-urlencoded。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传实现（txt）利用elementui

   changeFile(file, fileList) {
      console.log(file)
      console.log(file.raw)
      this.fileList.push(file.raw)
      console.log(this.fileList)
      // this.uploadFile(file)
      // 解析上传的文件
      //let file = this.uploadFiles[0]
      let reader = new FileReader()
      // abort none 中断读取
      // readAsBinaryString file 将文件读取为二进制码，通常我们将它传送到后端，后端可以通过这段字符串存储文件
      // readAsDataURL file 将文件读取为 DataURL，一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
      // readAsText file, [encoding] 将文件读取为文本，读取的结果即是这个文本文件中的内容
      reader.readAsText(file.raw)
    
      reader.onload = (e) => {
        // 读取文件内容
        this.txtfileString = e.target.result
        //上传
        this.axios({
          method: 'post',
          url: 'http://localhost:8081/stuinfo/txtupload',
          data: this.$qs.stringify({ txtdata: this.txtfileString }),
          headers: {
            'Content-type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res.data)
        })
   
      }
    },