2019-8-22学习笔记---文件上传与读取

如果是图片格式 ，请使用下图倒数第二种

import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
@Component({selector: 'app-item-two',templateUrl: './item-two.component.html',styleUrls: ['./item-two.component.less']
})
export class ItemTwoComponent implements OnInit {private status = [];private mystatus;constructor(private http:_HttpClient) { }ngOnInit() {let url='http://localhost:4200/assets/myjson/mydata.json';this.http.get(url).subscribe((res:any)=>{this.status=res.data1console.log(this.status)})}myUpload(e){console.log(e)let fileReader = new FileReader();fileReader.onload=()=>{console.log(fileReader.result)}// fileReader.readAsText(e.target.files[0], 'utf-8')fileReader.readAsText(e.target.files[0])}
}

item-two works!

{<!-- -->{myData}}
上传文件


Click to Upload

import { Component, OnInit, ViewChild, TemplateRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { _HttpClient } from '@delon/theme';
import { tap, map } from 'rxjs/operators';
import Clipboard from '../../../../clipboard.min.js';
import { STComponent, STColumn, STData, STChange } from '@delon/abc';@Component({selector: 'app-wlblock',templateUrl: './wlblock.component.html',styleUrls: ['./wlblock.component.less']
})
export class WlblockComponent implements OnInit {private status = [];private mystatus;private myData2;private myData;constructor(private http:_HttpClient ) { }ngOnInit() {//初始化时候，异步请求服务器端的首页数据let url='http://localhost:4200/assets/myjson/mydata.json';this.http.get(url).subscribe((res:any)=>{this.status=res.data1console.log(this.status)})}myclick(e:MouseEvent){e.preventDefault();console.log(e)}getData1(e){var clipboard = new Clipboard('btn');clipboard.on('success', function(e) {console.info('Action:', e.action);console.info('Text:', e.text);console.info('Trigger:', e.trigger);e.clearSelection();
});clipboard.on('error', function(e) {console.error('Action:', e.action);console.error('Trigger:', e.trigger);
});}
}

新增编辑删除刷新保存上一个下一个

选项一选项一{<!-- -->{myData}}上传文件

.mybox{display:flex;justify-content: center;align-items: center;padding-top:30px;.left-box,.right-box{width:50%;min-width: 350px;clear: both;}.myselect{width:200px;}
}

/*!* clipboard.js v2.0.4* https://zenorocha.github.io/clipboard.js* * Licensed MIT © Zeno Rocha*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return function(n){var o={};function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=n,r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=function(){function o(t,e){for(var n=0;n

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！