摘要:是一個基于組件的圖片上傳組件支持等服務端自定義獲取簽名批量上傳預覽刪除排序等功能需要版本大于支持地址安裝引入調用圖片上傳服務地址圖片查看地址前綴配置項類型默認值描述類型目前
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 | 回顯圖片的路徑 半路徑 ;分隔 |
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" } ]]
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98268.html
摘要:接下來講解一下博客中用的圖床阿里云對象存儲,簡稱,雖然目前大家用的比較多的是七牛云之類的,但是因為我個人原因我還是選擇了阿里云,后面我會簡單說明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言 之前打算寫一篇有關個人博客SEO優化的體驗和一些自身體會,但是發現自己還沒完全...
摘要:接下來講解一下博客中用的圖床阿里云對象存儲,簡稱,雖然目前大家用的比較多的是七牛云之類的,但是因為我個人原因我還是選擇了阿里云,后面我會簡單說明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言 之前打算寫一篇有關個人博客SEO優化的體驗和一些自身體會,但是發現自己還沒完全...
閱讀 3448·2023-04-26 00:39
閱讀 4039·2021-09-22 10:02
閱讀 2532·2021-08-09 13:46
閱讀 1098·2019-08-29 18:40
閱讀 1444·2019-08-29 18:33
閱讀 773·2019-08-29 17:14
閱讀 1513·2019-08-29 12:40
閱讀 2970·2019-08-28 18:07