上传文件并读取文件内容

最新推荐文章于 2024-01-30 17:58:00 发布

andang-忘川

最新推荐文章于 2024-01-30 17:58:00 发布

阅读量984

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_56011472/article/details/125161034

版权

1.传统方式

<input type="file" ref="fileInput" @change="getFile" />

<script>
 // 上传时获取文件数据
    getFile(event) {
      //这就是你上传的文件
      // event.target.files[0];
      // 新建一个FileReader
      const reader = new FileReader();
      // 读取文件
      reader.readAsText(event.target.files[0], "UTF-8");
      // 读取完文件之后会回来这里
      reader.onload = (e) => {
      // 读取文件内容
      const fileString = e.target.result;
      // 接下来可对文件内容进行处理
      this.uploadForm.key = fileString;
      };
    },
</script>

2.el-upload上传文件发送文件到后端

<el-upload
class="upload-demo"
action="https://"
:on-change="handleChange"
:show-file-list="false"
:multiple="false"
:auto-upload="false"
>
  <el-button
    size="small"
    type="primary"
    icon="el-icon-upload2"
  ></el-button>
</el-upload>

<script>
export function certLdap(data) {
  return request({
    url: "/v1/cert",
    method: "post",
    data,
    contentType: "multipart/form-data"
  });
}
handleChange(file) {
 let formData = new FormData();
 formData.append("cert", file.raw);
 certLdap(formData).then((res) => {
 this.postForm.server_certificate = res.data.cert;
 });
},
</script>