[react] antd Upload 組件 筆記

何時使用

上傳是將信息（網頁、文字、圖片、視頻等）通過網頁或者上傳工具發布到遠程服務器上的過程。

• 當需要上傳一個或一些文件時。

• 當需要展現上傳的進度時。

• 當需要使用拖拽交互時。

引--antd官網 https://ant.design/components/upload-cn/

　　

 

 <Upload
                                                className="pic"
                                                accept="image/jpeg,image/png"
                                                listType="picture-card"
                                                fileList={fileList}
                                                beforeUpload={(e) => this.beforeUpload(e, "twoPath")}
                                                onChange={(e) => this.onChangePic(e, "twoPath", "twoFlag")}
                                            >
                                                    {this.state.twoPath ?
                                                        <div>
                                                            <img src={this.state.twoPath} style={{ width: "100%", height: "100%" }}></img>
                                                            {/* <span className="up change" style={{ display: (baseParms.Info && baseParms.Info.qualificationPhoto && this.state.twoPath != "" ? "none" : "inline-block") }}>上傳照片</span> */}
                                                            <span className="change" style={{ display: ((baseParms.Info && baseParms.Info.qualificationPhoto) || this.state.twoPath != "" ? "inline-block" : "none") }}>重新上傳</span>
                                                        </div>
                                                        : uploadButton}
                                                </Upload>

　　

 1.本地照片上傳-更換顯示是通過通過本地文件地址拿到圖片路徑然后轉為base64----------getBase64

  getBase64 = (img, callback) => {
            const reader = new FileReader();
            reader.addEventListener('load', () => callback(reader.result));
            reader.readAsDataURL(img);
        }

2.可限制圖片的格式 和 大小 --------beforeUpload

 beforeUpload = (file, name) => {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                message.error('只能上傳JPG/PNG文件!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.error('圖片大小不能超過2MB!');
            }
            return false;
        }

　3.設置回顯---地址賦值 imageUrl

 onChangePic = (info, name, flag) => {
            // console.log("info", info)
            this.getBase64(info.file, imageUrl =>
                this.setState({
                    [name]: imageUrl,
                    // loading: false,
                    // fileList: info.file,
                }, () => {
                    // console.log("imageUrl-0-000----",imageUrl)
                }),

            );