【vue开发基础】之Vue实现导入导出文件功能（基于饿了么UI）（二）

❤ 写在前面

如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
欢迎关注我的公众号【有更多的前端教程】 或者来看 我的个人网站

---

1.导入文件（使用elmentui的上传组件）

<el-upload
		drag
    :limit="1"
    action="https://jsonplaceholder.typicode.com/posts/"
    ref="upload"
    accept=".json"
    :fileList="fileList"
    :on-success="onSuccess"
    :on-remove="onRemove"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div
       class="el-upload__tip"
       style="margin-top: 15px; width: 360px; text-align: center"
       slot="tip"
       >
    上传json文件，且只能上传 1 个文件
  </div>
</el-upload>

onSuccess(res, file, fileList) {
  let arr = file.name.split(".");
  let docName = arr[0]; //导入的文件名称
  let reader = new FileReader();
  reader.readAsText(file.raw);
  reader.onload = (e) => {
    this.uploadData = JSON.parse(e.target.result); //e.target.result 文件的内容
  };
},
  onRemove(file) {
    this.fileList = [];
  },

2.导出文件

let docContent = "" //导出文件的内容
let docName = "test.txt" //导出的文件名称（带文件后缀名）
let content = new Blob([docContent]);
//生成url对象
let urlObject = window.URL || window.webkitURL || window;
let url = urlObject.createObjectURL(content);
//生成<a></a>DOM元素
let el = document.createElement("a");
//链接赋值
el.href = url;
el.download = docName;
//必须点击否则不会下载
el.click();
//移除链接释放资源
urlObject.revokeObjectURL(url);

Thanks♪(･ω･)ﾉ，到此就结束了，有什么问题都可以问！
欢迎评论 / 私信我~