antd 的upload上传图片成功后自动刷新

Question

问题描述

componentDidMount() 里设置了默认值
在upload上传图片成功后自动刷新
require('../image/carImage/' + this.props.src)

(1)这样会出现问题
var a='7e12f1fc-28ba-40b2-a60e-8e250be5fdca';
var path=require('../image/carImage/'+a+'.jpg');
(2)这样没有问题

var path=require('../image/carImage/'+'7e12f1fc-28ba-40b2-a60e-8e250be5fdca'+'.jpg');

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

import * as React from 'react';
import { Icon, Modal, Upload,Button,message } from 'antd';
import payOne from '../image/1000.jpg'
import axios from 'axios';
export default class PallWrop extends React.Component {
    state = {
        previewVisible: false,
        previewImage: '',
        show: true,
        fileList: [/*{
        //    uid: '-1',
        //    name: 'xxx.png',
        //    status: 'done',
        //    url: require('../image/carImage/7e12f1fc-28ba-40b2-a60e-8e250be5fdca.jpg'),
        }*/],
    };
    handleCancel = () => this.setState({previewVisible: false})

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }

    handleChange = ({ file,fileList }) => {
        // e.preventDefault();

        this.setState({fileList:fileList})
        //alert(fileList[0].url)
        message.config({
            top: 130,
            duration: 2,
            maxCount: 3,
        });
        if (file.status == 'done') {

            console.info("---------------------" + this.props.position);
            console.log(JSON.stringify(file)); // file 是当前正在上传的 单个 img
            console.info("***************************");
            console.log(JSON.stringify(fileList)); // fileList 是已上传的全部 img 列表
            message.info('上传成功!', 1);
        } else if (file.status == 'error')
            message.info('上传失败!', 1);

    }

    componentDidMount() {
        var src = "xx.jpg";
        console.info('加载')
         //this.showImage();
        if (this.props.src != null)
            this.setState({fileList: [{
                uid: '-1',
                name: 'xxx.png',
                status: 'done',
                url: require('../image/carImage/' + this.props.src),
            }]});

    }

  

    render() {
        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus"/>
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <div  >
                <Upload

                    action="http://localhost:8080/upload/image"
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                    data={file => ({ // data里存放的是接口的请求参数
                    pic: file, // file 是当前正在上传的图片
                    carId: 19,
                    position: this.props.position,
            })}
                >
                    {fileList.length >= 1 ? null : uploadButton}
                </Upload>
             
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage}/>
                </Modal>

            </div>
        )
            ;
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？