javascript - antd 关于上传图片组件的一个问题
本文介绍了javascript - antd 关于上传图片组件的一个问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
打开一个页面,我会在didmount里面多次修改state,最后得出一个defaultFileList
, 但是我这么写图片并不会放上去
<Upload
action="/upload/img"
listType="picture-card"
onPreview={this.handlePreview}
defaultFileList = {this.state.filePathList}
onRemove={this.handleRemoveImage}
>
{uploadButton}
</Upload>
但是图片的list在render的时候已经打出来多次了,最后一次确实有item。
然后我把defaultFileList
替换为fileList
之后默认的图片就能显示出来了,但是当我再次上传图片的时候,upload方法里面的参数的file的status一直为loading并且不刷新。
所以最终的问题是,同样一份数据,为什么放在defaultFileList
和fileList
就一个不展示一个展示呢?
------------update-----------------
我现在将默认的图片放在fileList
里面了。同时我在antd 的 upload组件内打断点,
在 upload - index.js 文件中:
_this.onProgress = function (e, file) {
var fileList = _this.state.fileList;
var targetItem = (0, _getFileItem2["default"])(file, fileList);
// removed
// 这个地方直接让方法return 了导致上传的图片一直为loading状态,求解这个地方是什么意思?
if (!targetItem) {
return;
}
targetItem.percent = e.percent;
console.log('ant upload',file);
_this.onChange({
event: e,
file: targetItem,
fileList: _this.state.fileList
});
};
解决方案
已经改好了。
let filePathList = result.image_infos.map((obj, index) => {
let o:any = obj;
o.url = obj.base_url;
o.thumbUrl = obj.base_url;
o.status = 'done';
o.uid = index;
return o;
});
貌似当自己控制fileList的时候,文件格式必须是antd指定的。当时生成文件列表时少了uid
这篇关于javascript - antd 关于上传图片组件的一个问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文