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

gself 发布于2019-08-23 12:17 / 2575人阅读

摘要：是一个基于组件的图片上传组件支持等服务端自定义获取签名批量上传预览删除排序等功能需要版本大于支持地址安装引入调用图片上传服务地址图片查看地址前缀配置项类型默认值描述类型目前

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"
        };

配置项	类型	默认值	描述
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"
    }
  ]]

超融合服务器私有云七牛云存储图片上传七牛云cdn+oss价格表七牛云是否支持webrtc 七牛云一般多少钱一个月

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98268.html

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

摘要：是一个基于组件的图片上传组件支持等服务端自定义获取签名批量上传预览删除排序等功能需要版本大于支持地址安装引入调用图片上传服务地址图片查看地址前缀配置项类型默认值描述类型目前 react-uplod-img 是一个基于 React antd组件的图片上传组件支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能需要 react 版本大于 v16.1.0 ...

starsfun 2019-08-05 15:08 评论0 收藏0
解决博客图片存储——阿里云的OSS运用

摘要：接下来讲解一下博客中用的图床阿里云对象存储，简称，虽然目前大家用的比较多的是七牛云之类的，但是因为我个人原因我还是选择了阿里云，后面我会简单说明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言之前打算写一篇有关个人博客SEO优化的体验和一些自身体会，但是发现自己还没完全...

Lowky 2019-08-29 12:31 评论0 收藏0
解决博客图片存储——阿里云的OSS运用

摘要：接下来讲解一下博客中用的图床阿里云对象存储，简称，虽然目前大家用的比较多的是七牛云之类的，但是因为我个人原因我还是选择了阿里云，后面我会简单说明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言之前打算写一篇有关个人博客SEO优化的体验和一些自身体会，但是发现自己还没完全...

cgh1999520 2019-08-05 11:11 评论0 收藏0
解决博客图片存储——阿里云的OSS运用

摘要：接下来讲解一下博客中用的图床阿里云对象存储，简称，虽然目前大家用的比较多的是七牛云之类的，但是因为我个人原因我还是选择了阿里云，后面我会简单说明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言之前打算写一篇有关个人博客SEO优化的体验和一些自身体会，但是发现自己还没完全...

incredible 2019-08-01 16:46 评论0 收藏0
浅析前端上传

摘要：项目上也用到很多上传文件的地方，七牛云，阿里云，讯飞上传都接触过，所以在这里做一个记录，总结一下前端上传的几种方式。类型的文件名七牛云上传浅析是一个基于七牛开发的前端。 showImg(https://segmentfault.com/img/bVbvibu?w=1920&h=1080); 图片，音频，视频等等这几种常见的资源类型，如果需要从前端上传到服务端，有几种方式呢？不妨回顾一下...

terro 2019-08-26 10:13 评论0 收藏0