前端图片压缩上传

方法一：

https://blog.csdn.net/Weixiaohuai/article/details/105492051

 

方法二：VUE和React都可以用

版本：

 

 

使用方法：

// 引入image-conversion
import * as imageConversion from "image-conversion";

//....

// 压缩到200KB,这里的200就是要压缩的大小,可自定义
        let files = file;
        imageConversion.compressAccurately(files, 200).then((res) => {
          res = new File([res], files.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          let formData = new FormData();
          formData.append("uploadFile", res);
          formData.append("code", rowData.code);
          formData.append("delayStatus", 0);
          uploadFiles(formData, 1);
        });

 

 

案例：压缩后并转base64

import React, { useState, useEffect } from 'react'
import { Button, Modal, Form, Select, Spin, Input, Upload, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import * as imageConversion from "image-conversion";// 引入image-conversion图片压缩插件
import { getValueFromEvent, getBase64 } from "../pubCom"

function EidtAreaTranApply(props) {
    const [qlzxsq_Form] = Form.useForm();//区内转学申请form表单
    const [confirmLoading, setConfirmLoading] = useState(false)//提交按钮loading
    const [fileArr, setFileArr] = useState([])

  
//文件上传自定义校验
    const validatorFn = (_) => {
        if (fileArr.length <= 0) {
            return Promise.reject("请选择要上传的附件")//校验结果错误，提示校验信息
        } else {
            return Promise.resolve()//校验结果正确

        }
    }

    //点击保存申请
 const clickSave = async () => {
        try {
            const row = await qlzxsq_Form.validateFields();//表单校验
            setConfirmLoading(true)
            console.log("row", row);
            let baseFiles = []//存储base64的图片数组
            if (Array.isArray(row.fj?.fileList)) {
                let files = [...row.fj?.fileList];//获取表单选择的图片数组
                baseFiles = await Promise.all(
                    files.map(item => {
                        return (async () => {
                            let newFile = ""
                            if (item?.size / 1024 / 1024 > 1) {
                                // 压缩到1000KB,这里的1000就是要压缩的大小,可自定义
                                let res = await imageConversion.compressAccurately(item?.originFileObj, 1000)
                                console.log("压缩后", res);
                                //转base64
                                newFile = await getBase64(res)
                            } else {
                                newFile = item.thumbUrl
                            }
                            return newFile
                        })()
                    })
                )
            }

            let params = {
                ...row,
                fj: [...baseFiles]
            }
            if (props.isUpdate) {//判断是编辑还是新增
                //编辑
                params.id = props.editInfo?.id
                updateTransferApply({ ...params })//编辑申请
            } else {
                //新增
                addTransferApply({ ...params })//新增申请
            }
            console.log("上传文件", params);
        } catch (errInfo) {
            setConfirmLoading(false)
            // console.log("errInfo", errInfo);
            // message.error("提交失败")
        }
    }

    return (
        <>
            <Modal
                title={<ModalHead title='区内转学申请' />}
                width="900px"
                centered
                maskClosable={false}
                open={props.isModalOpen || false}
                onCancel={props.handleCancel}
                bodyStyle={{
                    "overflowX": "hidden",
                    "overflowY": "auto"
                }}
                // "pzj-overHidden"
                footer={
                    <div className='pzj-footerButtonCenter'>
                        <Button className='bottonSpace bottonWidth' onClick={props.handleCancel}>取消</Button>
                        <Button className='bottonWidth' type='primary' onClick={clickSave} loading={confirmLoading}>提交申请</Button>
                    </div>
                }
            >

                   {/* 申请信息表单 */}
                    <Form form={qlzxsq_Form} name="qlzxsq-Form" className='qlzxsq-Form'>
                      //.................
                       <Form.Item label={<RequireTitle title="附件上传" />}
                        // valuePropName="fj"
                        >

                            <Form.Item
                                noStyle
                                name="fj"
                                rules={[
                                    {
                                        validator: (_, value, fn) => validatorFn(_, value, fn)
                                    },
                                ]}>
                                <Upload
                                    maxCount={3}
                                    multiple
                                    listType="picture-card"
                                    accept="image/*"
                                    showUploadList={{ showPreviewIcon: false }}
                                    fileList={fileArr}
                                    beforeUpload={() => false}
                                    onChange={(e) => {
                                        if (Array.isArray(e?.fileList)) {
                                            setFileArr([...e.fileList])
                                        } else {
                                            setFileArr([])
                                        }
                                    }}
                                >
                                    <div>
                                        <PlusOutlined style={{ "fontSize": "24px" }} />
                                    </div>
                                </Upload>
                            </Form.Item>
                            <span>上传转学证明材料（最多3张图片）</span>
                        </Form.Item>
                    </Form>
          </Modal >
        </>
    );
}

pubCom.js--公共方法

//去除首尾空格
export const getValueFromEvent = (e) => {
    return e.target.value.replace(/(^\s*)|(\s*$)/g, '');
}

// 将file文件上传转化为base64进行显示
export const getBase64 = (file) => {
    return new Promise((resolve, reject) => {
        ///FileReader类就是专门用来读文件的
        const reader = new FileReader()
        //开始读文件
        //readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串，
        reader.readAsDataURL(file)
        // 成功和失败返回对应的信息，reader.result一个base64，可以直接使用
        reader.onload = () => resolve(reader.result)
        // 失败返回失败的信息
        reader.onerror = error => reject(error)
    })
}