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));

這個例子是上傳單張圖的,可以根據自己的需求改造