刷爆！Js上传文件file大全

1：在react中，用Ant Dsign框架的上传组件Upload；
1-1：先引入上传组件Upload，定义上传事件customRequest
1-2：在事件里面创建上传文件的形式，const formData = new FormData();文件一般指file
1-3：在file里面添加属性和属性值
1-4：调用接口，将要上传的flie的参数传递进去

  //创建文件file
 const formData = new FormData();
 //在file里面添加属性和属性值
 formData.append("file", value.file);
 formData.append("name",  value.file.name);
 formData.append("infoID", docuid);
 //调用上传的接口
 postuploaddoc(formData)
      .then(res=>{
      	console.log(res)
      })

完整的前端上传代码：

import React, { Component } from 'react'
import { Upload, message} from '@uyun/components'
import { postuploaddoc} from '~/services/api'
/**
 * 编辑文档加载doc的view
 */
@observer
export default class DocView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      docuid: null,   //初始化的文档id
    }
  }
  
  componentDidMount () {
    const {documentid} = this.props;
    this.setState({
      docuid: documentid
    })
  }

  //用于自定义的上传事件
  customRequest = (value) => {
    const formData = new FormData();
    const {docuid} = this.state;
    //上传本地附件时候所提交的附件参数信息
    formData.append("file", value.file);
    formData.append("name",  value.file.name);
    formData.append("infoID", docuid);

    postuploaddoc(formData)
      .then(res=> {
        let num = [];  //声明一个空数组
        num.push(res);
        let numfils = this.state.data.concat(num);
        if(res.message=='上传成功'){
          this.setState({
            data: numfils
          })
          message.success('上传成功')
        }
      })
  }

  render () {
    const props = {
      name: 'file',
      action: 'http://localhost:8080',
      headers: {
        authorization: 'authorization-text',
      },
    };

    return (
            <Upload {...props}  customRequest={this.customRequest}>
              <div style={{marginLeft: 445}}><Button>上传附件</Button></div>
            </Upload> 
    )
  }
}