ant design 3.x中upload组件上传图片压缩

我乃小神神

已于 2022-08-12 16:14:24 修改

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端小基础文章标签： html5 javascript upload组件上传 ant 上传图片压缩图片上传压缩

于 2021-09-13 10:58:37 首次发布

本文链接：https://blog.youkuaiyun.com/wonaixiaoshenshen/article/details/120262692

前端小基础专栏收录该内容

32 篇文章

订阅专栏

这篇博客展示了如何在React应用中实现图片上传功能，包括自定义上传逻辑、图片压缩以及上传进度显示。通过`useState`管理状态，`fetch`进行API调用，以及`FileReader`和`canvas`进行图片压缩。此外，还涵盖了文件列表更新、移除文件以及`beforeUpload`预处理步骤的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不想描述多余的，直接看代码简单直接

const [defaultFileList, setDefaultFileList] = useState([]);

 <Upload
                accept="image/*"
                customRequest={uploadImage}
                onChange={handleOnChange}
                listType="picture-card"
                showUploadList={true}
                fileList={defaultFileList}
                onRemove={removeFileItem}
                beforeUpload={beforeUpload}
                className="image-upload-grid"
              >
                {defaultFileList.length >= 3 ? null : uploadButton}
              </Upload>

customRequest 自定义上传图片的

  const uploadImage = async options => {
    const { onSuccess, onError, file, onProgress, fileList } = options;
    const fmData = new FormData();
    fmData.append('file', file);
    try {
      fetch(`***/api/common/upload_file`, {
        method: 'POST',
        credentials: 'include',
        body: fmData
      })
        .then(response => response.json())
        .catch(error => {
          message.error('error');
        })
        .then(response => {
          onSuccess('Ok');
          if (response.code === 0) {
            let list = {
              uid: file.uid,
              data: response.data
            };
            //setDefaultFileList 这个这个一定需要
            setDefaultFileList([
              ...defaultFileList,
              { ...file, url: `https:www.***.com/api/file/download/${response.data}`, uid: response.data }
            ]);
            setState({
              imgList: [...imgList, list]
            });
            setState({
              imgfileId: [...imgfileId, response.data]
            });
          } else {
            message.error(response.msg);
          }

          console.log('Success:', response);
        });
    } catch (err) {
      console.log('Eroor: ', err);
      const error = new Error('Some error');
      onError({ err });
    }
  };

beforeUpload 压缩图片在这一步操作

const beforeUpload = (file, fileList) => {
    return new Promise(resolve => {
      // 图片压缩
      let reader = new FileReader(),
        img = new Image();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        img.src = e.target.result;
      };

      img.onload = function() {
        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');

        let originWidth = this.width;
        let originHeight = this.height;

        canvas.width = originWidth;
        canvas.height = originHeight;

        context.clearRect(0, 0, originWidth, originHeight);
        context.drawImage(img, 0, 0, originWidth, originHeight);

        canvas.toBlob(
          blob => {
            let imgFile = new File([blob], file.name, { type: file.type }); // 将blob对象转化为图片文件
            resolve(imgFile);
          },
          file.type,
          0.2
        ); // file压缩的图片类型
      };
    });
  };

onChange 一定需要

  const handleOnChange = ({ file, fileList, event }) => {
    let a = {
      uid: '1',
      name: file.name,
      status: 'uploading',
      url: ''
    };
    setDefaultFileList([a]);
  };

onRemove 也需要

  const removeFileItem = (file, fileList) => {
    console.log('file', file, fileList);
    console.log(defaultFileList);

    const matchKey = file.uid !== undefined ? 'uid' : 'name';
    const removed = defaultFileList.filter(item => item.uid !== file[matchKey]);
    if (removed.length === defaultFileList.length) {
      return null;
    }
    setDefaultFileList(removed);
    return removed;
  };