Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

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
            });
        };

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

已经改好了。

          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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...