前端通过input标签封装Upload组件实现文件上传

简介: 前端通过input标签封装Upload组件实现文件上传


基于input标签封装upload组件

import React, { Component, Fragment, createRef } from 'react';
import './Upload.less';
type StateType = {
  [propName: string]: any;
};
interface changeFileType {
  (e: any): any;
}
type PropType = {
  accept: string; // 父级传过来的文件接收类型
  changeFile: changeFileType; // 父级传过来的文件修改事件函数
  [propName: string]: any;
};
interface Upload {
  state: StateType;
  props: PropType;
  inputDom: any;
}
class Upload extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
    };
    this.inputDom = createRef(); // input标签DOM
  }
  
  // 文件修改的事件函数
  private changeFile = (e: any): void => {
    const file = e.target.files[0];
    if (!file.size) {
      return;
    }
    const formData = new FormData();
    formData.append('file', file);
    const params = {
      file: formData,
      fileType: file.type
    };
    this.props.changeFile(params);
    this.inputDom.current.value = null;
  }
  render() {
    const { accept } = this.props;
    return (
      <Fragment>
        <input type="file" ref={this.inputDom} id="file" accept={accept} onChange={this.changeFile} className="file-input" />
      </Fragment>
    )
  }
}
export default Upload;

修改样式

修改样式,使得Upload组件基于父级绝对定位,并且宽高等于父级,层级在最上方,不透明度为0

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

请求头添加’Content-Type’:‘multipart/form-data’

请求头需要添加'Content-Type':'multipart/form-data'

父级使用封装好的Upload组件上传文件

// 图片文件上传
private changeImgFile = (e: any): void => {
  this.setState({
    imgFile: e.file,
  });
}
  
<Upload accept='image/*' changeFile={this.changeImgFile} />

常见的input标签accept属性接收的参数

值描述 描述
audio/* 接受所有的声音文件
video/* 接受所有的视频文件
image/* 接受所有的图像文件
audio/,video/,image/* 接受所有的声音、视频、图像文件
* 接受所有文件
MIME_type 一个有效的 MIME 类型,不带参数。请参阅 IANA MIME 类型,获得标准 MIME 类型的完整列表
目录
相关文章
|
4天前
|
存储 JavaScript 前端开发
前端xss攻击——规避innerHtml过滤标签节点及属性
前端xss攻击——规避innerHtml过滤标签节点及属性
46 4
|
4天前
|
前端开发 JavaScript Java
浅谈企业级前端应用中的组件概念和具体的应用
浅谈企业级前端应用中的组件概念和具体的应用
10 1
|
4天前
|
移动开发 前端开发
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)
12 1
|
4天前
|
移动开发 前端开发 JavaScript
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(一)
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(一)
17 2
|
4天前
|
前端开发
前端进度条组件NProgress
前端进度条组件NProgress
22 1
前端进度条组件NProgress
|
4天前
|
前端开发 数据安全/隐私保护 计算机视觉
前端 基础标签
前端 基础标签
6 0
|
4天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
4天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
4天前
|
前端开发 数据可视化 UED
【Web 前端】标签上title与alt属性有什么区别?
【4月更文挑战第22天】【Web 前端】标签上title与alt属性有什么区别?
|
4天前
|
前端开发 搜索推荐 开发者
【Web 前端】什么是语义化标签?
【4月更文挑战第22天】【Web 前端】什么是语义化标签?