update img and fix typos

This commit is contained in:
qianguyihao 2019-03-02 13:46:31 +08:00
parent 03e8312f52
commit 4b457a5ade
3 changed files with 31 additions and 11 deletions

View File

@ -187,11 +187,11 @@ implements、import、int、interface、long、native、package、private、prot
控制台输出如下:
```
sting
sting
sting
sting
sting
string
string
string
string
string
```
注意事项:

View File

@ -28,7 +28,7 @@ console.log(a + 'haha'); // 转换成 String 类型
举例如下:
```
变量.toSting()
变量.toString()
```
【重要】该方法**不会影响到原变量**,它会将转换的结果返回。当然我们还可以直接写成`a = a.toString()`,这样的话,就是直接修改原变量。

View File

@ -3,12 +3,26 @@
本次做后台管理系统,采用的是 AntD 框架。涉及到图片的上传用的是AntD的 [upload](https://ant.design/components/upload-cn/) 组件。
前端做文件上传这个功能,是很有技术难度的。既然框架给我们提供好了,那就直接用呗。结果用的时候,发现 upload 组件的很多bug。
前端做文件上传这个功能,是很有技术难度的。既然框架给我们提供好了,那就直接用呗。结果用的时候,发现 upload 组件的很多bug。下面来列举几个。
备注本文写于2019-03-02使用的 antd 版本是 3.13.6。
## 使用 AntD 的 upload 组件做图片的上传
因为需要上传多张图片,所以采用的是照片墙的形式。上传成功后的界面如下:
1上传中
![](http://img.smyhvae.com/20190302_1335.png)
2上传成功
![](http://img.smyhvae.com/20190302_1336.png)
3图片预览
![](http://img.smyhvae.com/20190302_1331.png)
按照官方提供的实例,特此整理出项目开发中的完整写法,亲测有效。代码如下:
```javascript
@ -115,7 +129,7 @@ class PicturesWall extends PureComponent {
return (
<div className="clearfix">
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
<FormItem label="工厂图片" {...formItemLayout}>
<FormItem label="图片图片" {...formItemLayout}>
{getFieldDecorator('myImg')(
<Upload
action="//jsonplaceholder.typicode.com/posts/" // 这个是接口请求
@ -281,8 +295,9 @@ fileList 的打印结果:
现在有个新的需求:如何编辑现有的页面呢?也就是说说,现有的页面中,是默认有几张图片的。当我编辑这个页面时,可以对现有的图片做增删,也能增加新的图片。
的model层代码是用 redux 写的。实现思路如下:
看到upload 组件有提供 `defaultFileList` 的属性。我试了下,这个`defaultFileList` 的属性根本没法儿用。
那就只要手动实现了。我的model层代码是用 redux 写的。实现思路如下:
1PicturesWall.js
@ -409,7 +424,7 @@ class PicturesWall extends PureComponent {
return (
<div className="clearfix">
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
<FormItem label="工厂图片" {...formItemLayout}>
<FormItem label="图片上传" {...formItemLayout}>
{getFieldDecorator('myImg')(
<Upload
action="//jsonplaceholder.typicode.com/posts/" // 这个是接口请求
@ -578,6 +593,11 @@ export default {
本文感谢 ld 同学的支持。
## 最后一段
有人说,前端开发,连卖菜的都会。可如果真的遇到技术难题,还是得找个靠谱的前端同学才行。这不,来看看前端码农日常:
![](http://img.smyhvae.com/20190302_1339.png)