antd upload组件结合七牛云上传图片

一、封装七牛云

import * as qiniu from 'qiniu-js'
import request from './request';
import path from 'path';
//获取七牛token,自己封装的请求后台的接口
export function getList(data) {
    return request.post('/pc/upload/get_qiniu_info', data)
}

const qiniuUpload = (file /**图片文件对象 */) => {
    return new Promise((resolve, reject) => {
        getList({ url: window.location.href }).then(data => {
            // console.log(data);
            let { token, domain } = data;
            // params = { token, domain }
            qiniuHandle(file, token).then(res => {
                // console.log(path.join(domain, res));
                // resolve(path.join(domain, res));
                resolve(`${domain}/${res}`)
            });
        })


    });

}
const qiniuHandle = (file, token) => {
    return new Promise((resolve, reject) => {
        const options = {
            quality: 0.92,
            noCompressIfLarger: true
        }
        const key = null  // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
        let config = {
            useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            region: qiniu.region.z0     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
        };

        let putExtra = {
            fname: "",  //文件原文件名
            params: {}, //用来放置自定义变量
            mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        qiniu.compressImage(file, options).then(data => {

            let observable = qiniu.upload(file, key, token, putExtra, config);
            observable.subscribe({
                next: (res) => {
                    // 主要用来展示进度
                    let total = res.total;
                    // window.Qapp.showLoad({content:'上传图片中！'})
                    console.log("进度：" + parseInt(total.percent) + "% ")
                },
                error: (err) => {
                    // 失败报错信息
                    console.log(err)
                },
                complete: (res) => {
                    // 接收成功后返回的信息
                    // console.log(res.key)
                    resolve(res.key);
                }
            })
        })
    });

}
export default qiniuUpload;

二、使用upload组件上传

import React, { memo, useState } from 'react';
import { message, Upload, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux';
import qiniu from '../../util/qiniu'
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}
const EditDiseaseArticle = memo((props) => {
    const [fileList, set_fileList] = useState([]);   //上传展示的图片列表
    const [previewVisible, set_previewVisible] = useState(false)
    const [previewImage, set_previewImage] = useState('');
    const [imageUrl, set_imageUrl] = useState('');  //要上传的图片
    const handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        set_previewImage(file.url || file.preview)
        set_previewVisible(true);
    };
    //图片上传参数
    let crolUrl = process.env.NODE_ENV === 'production' ? 'https://www.rorowoods.net/pc/upload/img' : '/api/pc/upload/img';
    // let crolUrl = 'https://qiniup.com';
    const imgUpdateprops = {
        name: 'img',
        action: crolUrl,
        listType: "picture-card",
        fileList,
        onPreview: handlePreview,
        customRequest(e) {
            // console.log(file)
            const imgItem = {
                uid: '1', // 注意，这个uid一定不能少，否则上传失败
                name: 'hehe.png',
                status: 'uploading',
                url: '',
                percent: 99, // 注意不要写100。100表示上传完成
            };
            set_fileList([imgItem])
            qiniu(e.file).then(res => {
                // console.log(res)
                const imgItem = {
                    uid: '1', // 注意，这个uid一定不能少，否则上传失败
                    name: 'hehe.png',
                    status: 'done',
                    url: res, // url 是展示在页面上的绝对链接
                };
                set_fileList(() => {
                    return [imgItem]
                })
                set_imageUrl(res)
            })
        },
        onChange(info) {

            if (info.file.status == "uploading") {
            }
            if (info.file.status == 'removed') {
                set_imageUrl('');
                set_fileList([])
            }
            if (info.file.status === 'done') {

            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    const handleCancel = () => {
        set_previewVisible(false);
    }
    const uploadButton = (
        <div>
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>规格:344×124</div>
        </div>
    )
    return <div>
        <Upload  {...imgUpdateprops}>
            {uploadButton}
        </Upload>
        <Modal
            visible={previewVisible}
            title="图片"
            footer={null}
            onCancel={handleCancel}
        >
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
    </div >
});
export default withRouter(connect()(EditDiseaseArticle));

这个例子是上传单张图的,可以根据自己的需求改造