前端文件上传

用于记录我开发过程中碰到的文件上传方式

material ui的文件上传

如果您正在使用 Material UI 并想要实现图片上传功能，可以使用 Material UI 的 Input 组件和 IconButton 组件，以及 HTML 的 input 标签和 label 标签来实现。

首先，您需要在 React 组件中创建一个 state 来存储上传的图片，例如：

const [selectedFile, setSelectedFile] = useState(null);

然后，在 render 函数中，您可以创建一个包含 Input 组件和 IconButton 组件的 label 标签，如下所示：

<label htmlFor="upload-photo">
  <Input
    style={{ display: 'none' }}
    id="upload-photo"
    type="file"
    onChange={handleFileInputChange}
  />
  <IconButton color="primary" component="span">
    <PhotoCamera />
  </IconButton>
</label>

在这里，Input 组件是隐藏的，而 IconButton 组件则显示为相机图标。当用户点击相机图标时，将触发与 Input 组件相关联的文件选择对话框。选择文件后，会调用 handleFileInputChange 函数来更新 selectedFile 状态。此外，htmlFor 属性将 label 组件与 Input 组件相关联，这样当用户点击相机图标时，也会触发文件选择对话框。

最后，您可以使用 selectedFile 状态来将上传的文件显示在您的组件中。

完整的代码示例如下：

import React, { useState } from 'react';
import { Input, IconButton } from '@material-ui/core';
import { PhotoCamera } from '@material-ui/icons';

function ImageUpload() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileInputChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  return (
    <div>
      <label htmlFor="upload-photo">
        <Input
          style={{ display: 'none' }}
          id="upload-photo"
          type="file"
          onChange={handleFileInputChange}
        />
        <IconButton color="primary" component="span">
          <PhotoCamera />
        </IconButton>
      </label>
      {selectedFile && (
        <img src={URL.createObjectURL(selectedFile)} alt="uploaded" />
      )}
    </div>
  );
}

export default ImageUpload;

如果要使用axios上传的话，可以用axios二次封装的发送请求，如:

封装好的请求:

export function uploadTeachingVideo(data){
    return request.post("/teachingVideo/upload",data)
}

在页面使用:

// 创建FormData对象来上传文件
let formData = new FormData();
formData.append("video",video)
formData.append('videoIcon', videoIcon); // 添加上传的视频文件
formData.append('videoName', videoName); // 添加视频名称
formData.append('group', group); // 添加视频分组
formData.append('videoType', videoType); // 添加视频类型
uploadTeachingVideo( formData) // 上传到服务器，替换为你的上传端点
    .then(response => {
        console.log(response); // 处理成功的响应，你可能需要在这里添加逻辑来处理上传成功的情况，例如重定向到另一个页面或显示消息给用户
    })
    .catch(error => {
        console.error(error); // 处理错误响应，你可能需要在这里添加逻辑来处理上传失败的情况，例如显示错误消息给用户
    });
// 清除上传的视频和图标，以便用户可以上传另一个视频
setVideoIcon(null);
setVideo(null);