今日完成
新增列表页重要功能完成
明日计划
列表页和新增页的ui样式优化，细节交互优化
遇到的问题
修改file控件的样式
出于安全性考虑，file控件不可被其他点击事件触发
可使用label来触发控件 但如过使用button则无效
<label class="label-img">
<input
type="file"
id="img"
(change)="getMsg()"
accept=".png, .jpeg"
style="display: none;"
/>
<div id="btn-select" class="btn btn-primary">
选择文件
</div>
</label>
file控件绑定change事件来触发绑定事件
该事件主要作用为获取选择图片文件的信息，并预览展示图片
// 获取file对象
let file: any = document.querySelector('#img')
let athis = this;
//创建FileReader对象
var reader = new FileReader();
//将数据转化为base64格式
if (file.files[0]) {
reader.readAsDataURL(file.files[0]);
}
通过FileReader的readAsDataURL()方法
使该文件转化为base64格式并包含在result属性中
图片的src可读取
athis.imgMsg.url绑定的是图片的src
即可实时预览图片，而不需将图片上传至服务器并返回图片地址后再展示
reader.onload = function () {
//同步图片src 图片预览
athis.imgMsg.url = reader.result;
}
问题
展示进度条这里卡了半天 相关资料不太好找，大部分资料都是angularjs的内容
最终还是结合官方资料和一些帖子才了解httpClient的request 的用法
// 获取文件对象
let file = (<HTMLInputElement>document.querySelector('#img')).files[0];
// 创建对象
const formData = new FormData();
// 添加请求数据
formData.append("file", file);
// 请求方式
const req = new HttpRequest('POST', `api/a/u/img/task`, formData, {
//该请求是否应该暴露出进度事件
reportProgress: true,
});
// 返回一个HttpEvents 的 Observable
this.http.request(req).subscribe(
(event: any) => {
// console.log(HttpResponse)
// 收到了上传进度事件。
if (event.type === HttpEventType.UploadProgress) {
console.log(event);
// 进度条变化
var elem = <HTMLInputElement>document.querySelector("#Progress");
elem.style.width = (event.loaded / event.total) * 50 + 'px';
// 获取响应内容
} else if (event.type == HttpEventType.Response) {
if (event.status == 200) {
// 获取图片url地址
this.editInfo.img = event.body.data.url
this.imgMsg.status = 1;
} else {
this.imgMsg.status = 0;
}
}
}
);
HttpRequest有个参数为reportProgress
开启该参数即可开启跟踪事件
将HttpRequest传递给httpClient.request（）方法 则会返回httpEvent的对象
httpevent分为以下几个
我们需要的进度条事件就为UploadProgress
返回该值的event就可获取上传进度
返回值event分别代表了上面的前五个成员
type1代表的就是上传进度事件 如文件较大就会像上面一样定时返回已上传的字节数
this.http.request(req).subscribe(
(event: any) => {console.log(event)
}
通过返回对象的的type属性筛选需要的信息
if(event.type == HttpEventType.Response){}
收获
angular的官方文档比较全面，但寻找自己需要的信息并不是那么的好找，很多东西藏得比较深，还是需要借助一些文章来确定关键词进行寻找
返回列表
评论