• 分享一个react 图片上传组件 支持OSS 七牛云


    react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能

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

    git地址

    demo

    安装

    npm i react-uplod-img --save

    引入

    import UpImage from 'react-uplod-img'

    调用

    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', //图片上传服务地址
                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'
            };
    
    <UpImage getSign={getOSSSign}  {...ossUploadConfig} extraParam={{bizName:"avatar"}}/>
    
    配置项 类型 默认值 描述
    type String oss 类型 目前支持 oss qiniu
    imageUploadServerHost String 图片上传服务地址前缀
    imageShowServiceHost String 图片查看服务地址前缀
    maxSize Number 2048 图片大小限制 单位KB
    totalNum Number 1 图片数量限制
    supportSort Bool false 是否支持拖拽排序
    extraParam Object 获取签名getSign方法 的第四个参数 供获取签名时 自定义入参
    getSign Func (suffix,width,height, extraPara)=>{} 获取签名的方法 Promise
    onChange Func (values)=>{} 图片上传成功时的回调 参数为图片的半路径;分隔的一个字符串
    value String 回显图片的路径 半路径 ;分隔

    getSign

    suffix 图片后缀 width 图片宽度 height 图片高度 extraParam 自定义的参数

    width 和 height 参数是组件通过渲染获取的图片真实宽高,
    推荐传递到服务器端参与签名 生成的URL key中能携带宽高信息 如
    /avatar/2018-10-10/f2b3ace0-cc33-11e8-8ad4-3550e70cc242_800_600.jpg 图片路径中携带了宽高信息 后期前端页面图片懒加载时 可以通过链接中的宽高信息做优化

        // 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,
                    });
                })
            })
        };
    
    

    注意事项

    获取签名采用的是async await的异步处理方式 需要你的项目支持async await 如果不支持 会报 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"
        }
      ]]
  • 相关阅读:
    重构手法之简化函数调用【5】
    netstat命令
    Python使用wxpy模块实现微信两两群组消息同步
    format函数格式化显示的方法
    scrapy介绍及使用
    Linux常用命令复习
    Django实现博客项目
    Django中CKEditor富文本编译器的使用
    Django-admin站点管理的详细使用
    电脑修改密码后,git push 报错unable to access
  • 原文地址:https://www.cnblogs.com/10manongit/p/12753626.html
一二三 - 开发者的网上家园