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并且不刷新。

所以最终的问题是,同样一份数据,为什么放在defaultFileListfileList就一个不展示一个展示呢?

------------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
            });
        };
阅读 11.7k
2 个回答

已经改好了。

          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

默认值要在组件初始化的时候就要设置好的,之后不管你再怎么修改都不会生效的。
你可以做一个判断,当defaultFileList有值了以后再渲染Upload

推荐问题