摘要：是一個(gè)基于組件的圖片上傳組件支持等服務(wù)端自定義獲取簽名批量上傳預(yù)覽刪除排序等功能需要版本大于支持地址安裝引入調(diào)用圖片上傳服務(wù)地址圖片查看地址前綴配置項(xiàng)類型默認(rèn)值描述類型目前

react-uplod-img 是一個(gè)基于 React antd組件的圖片上傳組件 支持oss qiniu等服務(wù)端自定義獲取簽名,批量上傳, 預(yù)覽, 刪除, 排序等功能

需要 react 版本大于 v16.1.0 支持async await

git地址

demo

安裝

npm i react-uplod-img --save

引入

import UpImage from "react-uplod-img"

調(diào)用

const getOSSSign = (suffix,width,height, extraParam) => {
    const apiServerUrl = "https://hp.bncry.cn/util/getAliyunSignature";
    const url = `${apiServerUrl}?${[
        `bizName=${extraParam.bizName}`,
        `suffix=${suffix}`,
        `width=${width}`,
        `height=${height}`,
    ].join("&")}`;

    return new Promise((resolve,reject)=>{
        fetch(url).then(async (response)=>{
            const res = await response.json();
            const formData = res.data;
            resolve({
                key: formData.dirPath,
                policy: formData.policy,
                OSSAccessKeyId: formData.OSSAccessKeyId,
                success_action_status: "200",
                callback: formData.callback,
                signature: formData.signature,
            });
        })
    })
};

const ossUploadConfig = {
            type:"oss",
            imageUploadServerHost: "https://hp-file-lf.oss-cn-hangzhou.aliyuncs.com", //圖片上傳服務(wù)地址
            imageShowServiceHost: "https://hp-file-lf.oss-cn-hangzhou.aliyuncs.com", // 圖片查看地址前綴
            totalNum: 5,
            supportSort: true,
            value:"avatar/2018-10-10/f2b3ace0-cc33-11e8-8ad4-3550e70cc242_220_138.jpg;avatar/2018-10-10/f2b42210-cc33-11e8-8ad4-3550e70cc242_1080_1920.jpg;avatar/2018-10-10/f2b44920-cc33-11e8-8ad4-3550e70cc242_1280_719.jpg"
        };

suffix 圖片后綴  width 圖片寬度 height 圖片高度  extraParam 自定義的參數(shù)

width 和 height 參數(shù)是組件通過渲染獲取的圖片真實(shí)寬高,
推薦傳遞到服務(wù)器端參與簽名 生成的URL key中能攜帶寬高信息 如
/avatar/2018-10-10/f2b3ace0-cc33-11e8-8ad4-3550e70cc242_800_600.jpg 圖片路徑中攜帶了寬高信息 后期前端頁面圖片懶加載時(shí) 可以通過鏈接中的寬高信息做優(yōu)化

    // oss
    const getSign = (suffix,width,height, extraParam) => {
        const apiServerUrl = "https://hp.bncry.cn/util/getAliyunSignature";
        const url = `${apiServerUrl}?${[
            `bizName=${extraParam.bizName}`,
            `suffix=${suffix}`,
            `width=${width}`,
            `height=${height}`,
        ].join("&")}`;

        return new Promise((resolve,reject)=>{
            fetch(url).then(async (response)=>{
                const res = await response.json();
                const formData = res.data;
                resolve({
                    key: formData.dirPath,
                    policy: formData.policy,
                    OSSAccessKeyId: formData.OSSAccessKeyId,
                    success_action_status: "200",
                    callback: formData.callback,
                    signature: formData.signature,
                });
            })
        })
    };

    // qiniu

    const getSign = (suffix,width,height, extraParam) => {
        const qiniuApiServerUrl = "https://hp.bncry.cn/util/getQiniuSignature";
        const url = `${qiniuApiServerUrl}?${[
            `suffix=${suffix}`,
            `width=${width}`,
            `height=${height}`,
        ].join("&")}`;

        return new Promise((resolve,reject)=>{
            fetch(url).then(async (response)=>{
                const formData = await response.json();
                resolve({
                    token: formData.uptoken,
                });
            })
        })
    };

注意事項(xiàng)

獲取簽名采用的是async await的異步處理方式 需要你的項(xiàng)目支持async await 如果不支持 會(huì)報(bào) ReferenceError: regeneratorRuntime is not defined

解決方案

npm i --save-dev babel-plugin-transform-runtime
在 .babelrc 文件中添加：
"plugins": [[
    "transform-runtime",
    {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }
  ]]