发表于： 2019-10-28 19:50:47
1 691
Angular新增数据功能
1.先在页面新增增加数据按钮，新增一个detail组件，配置好路由，点击增加按钮跳转到detail组件，如下图
2.以上的input输入框以及下拉框均使用ui组件完成，并进行双向数据绑定
我这里直接在ts文件中定义一个对象进行所有数据的双向数据绑定
public imgObj: any = {
title: '',
type: '',
status: '',
img: [],
content: '',
url: ''
}
3.上传图片功能使用ui组件中的upload组件完成，并将html以及ts代码复制到自己的ts文件中，如下
html
<div class="clearfix">
<nz-upload nzAction="/a/u/img/task" nzListType="picture-card" [(nzFileList)]="fileList"
[nzPreview]="handlePreview" (nzChange)='change($event)'>
<i nz-icon nzType="plus"></i>
<div class="ant-upload-text">Upload</div>
</nz-upload>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
(nzOnCancel)="previewVisible = false">
<ng-template #modalContent>
<img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
</ng-template>
</nz-modal>
</div>
ts
showUploadList = {
showPreviewIcon: true,
showRemoveIcon: true,
hidePreviewIconInNonImage: true
};
fileList = [];//这里面的代码删除后预览图就可以不显示了
previewImage: string | undefined = '';
previewVisible = false;
handlePreview = (file: UploadFile) => {
this.previewImage = file.url || file.thumbUrl;
this.previewVisible = true;
};
定义的change回调函数如下，当上传图片时就会触发这个回调函数
change(e) {
console.log(e)
if (e.type == "success") {
this.imgObj.img[0] = e.file.response.data.url
}
console.log(this.imgObj)
}
通过打印我们可以看到如下信息，这是图片上传的三个阶段
只有当第三阶段出现success，图片上传才算成功，但是我们图片并不是直接传输给后台的，而是传输给了云存储，可以将它当作一个中转站，前后台都是去云存储取这个图片
图片上传成功后，云存储会返回一个url地址，通过这个地址我们可以访问到上传的图片，如下图
我在回调函数中将这个返回的url赋给了imgObj双向数据绑定对象中的img，这里的img是个数组，它其实应该是个字符串的，但是ui组件规定了这里是数组形式，后面我们会再进行转换
4.现在我们的文字、选项以及图片都完成的数据的绑定，接下来定义方法进行上传
online() {
let params = JSON.parse(JSON.stringify(this.imgObj)) //深拷贝。不加这一行代码img地址会有问题
console.log(params)
params.img = this.imgObj.img[0];
params.status = 2;
console.log(params)
this.ser.upload(params).subscribe((res: any) => {
console.log(res);
if (res.code == 0) {
this.rou.navigate(['/page/article'])
}
})
}
由于有立即上传和存为草稿两种上传方法，所以我们只用修改status即可，上面也将img的地址转换成了字符串，upload方法如下，只需要修改接口即可，其他与登录方法同理
upload(data) {
const params = typeof (data) === 'object' && String(data) !== '[object File]' ? this.paramFormat(data) : data;
const requestHeader = {
headers: new HttpHeaders({
"Content-Type": "application/x-www-form-urlencoded"
})
}
return this.http.post(
this.uploadurl, params, requestHeader
)
}
返回列表
评论