ant上传图片 获取返回值中的图片路径 自用

import React, { PureComponent } from 'react';
//这里connect如果请求接口 必须要!
import { connect } from 'dva';

import {getAdList} from '../../axios';
import { Upload, Icon, message } from 'antd';

//import styles from './User.less'; 暂时用不到
//这块是使用connt获取数据的应该 不知道理解对不对

@connect( test  => ({ test, loading }) => ({
//这行是把返回的数据test.data给了test
  test : test.data,
  loading: loading.models.list,
}))


class Test extends PureComponent {
  state={
    fileList:[]
  }
  getBase64=(img, callback)=>{
    const reader = new FileReader();

    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };
  beforeUpload=async (file,imgName)=>{
    const formData=new FormData();
    formData.append("file",file);
    formData.append("token","kkkkkk");
    let imgUrl = '';
    await this.getBase64(file,imageUrl => {
      let imgAry = [imgName,imageUrl];
      let obj = {};
      obj[imgAry[0]] = imgAry[1];
      this.setState(obj);
      console.log(this.state[imgName]);
      imgUrl=imageUrl;
      if(imageUrl) {
        var image = new Image();
        image.onload = () => {
          // var width = image.width;
          // var height = image.height;
          //var fileSize = image.fileSize;
          // let a = ((9 / 16).toFixed(2));/*控制文件宽高比例*/
          // let b = ((16 / 9).toFixed(2));
          // let c = (width / height).toFixed(2);
          // if ((c !== a) && (c !== b)) {
          //     message.error("图片宽高比例错误");
          //     this.setState({imageUrl: null,loading: false });
          // }else{
          //     this.setState({imageUrl: imgUrl,loading: false });
          // }
          this.setState({imageUrl: imageUrl,loading: false });
        };
        image.src = imageUrl;
      }
    });
    let isLt500KB = file.size / 1024 < 500;/*控制文件大小*/
    if (!isLt500KB) {
      message.error('文件大小因小于500KB!');
      this.setState({imageUrl: null,loading: false });
    }
  };

  handleChange = (info) => {
    console.log(info);
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrl => {
        this.setState({
          loading: false,
        });
      });
    }
  };
  render() {
    console.log(this.props);
    const formData=new FormData();

   /* function beforeUpload(file) {
      console.log(file);
      //const isJPG = file.type === 'image/jpeg';
      // if (!isJPG) {
      //   message.error('You can only upload JPG file!');
      // }
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isLt2M) {
      //   message.error('Image must smaller than 2MB!');
      // }
      formData.append("file",file);
      formData.append("token","kkkkkk");
      console.log(formData.get("token"));
      //return isJPG && isLt2M;
    }*/
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    const imageUrl = this.state.imageUrl;


    return (
      <Upload
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="/api/picUpload/face"
        beforeUpload={this.beforeUpload}
        data={()=>{
          console.log(formData.get("token"));
          console.log(formData.get("file"));
          return formData;
        }}
        onChange={this.handleChange}
        accept={".png,.jpg,.jpeg"}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
      </Upload>
    );
  }
}
export default Test;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值