阿里oss上传图片react组件alioss-react,vue组件alioss-vue (不用我先收藏着,后端看下前端处理方法)
1、介绍
最近开发了一个项目,其中需要一个上传图片到阿里云的 oss 上面,就是上传图片到阿里云的 oss 上面。
因为之前开发过 vue 的阿里云 oss 上传,所以直接复制粘 vue 的组件。
因为我做的是 react 的项目,所以需要稍微修改。
介于以后会经常用到,所以决定将它封装成组件,并且添加到 npm 包里面。
xl_alioss_vue : 这个是 vue 的 NPM 包
xl_alioss_react : 这个是 react 的 NPM 包
2、项目的安装和预览
xl_alioss_vue 的安装和应用
安装:
yarn add xl_alioss_vue
使用:
<template>
<FileUpload url="http://127.0.0.1:8081/common/upload/alioss/vue"
v-on:upLoadImgEnd="upLoadImgEnd"
v-on:upload="upload" >
<img v-if="imgUrl" :src="imgUrl" alt="">
<p v-if="!imgUrl">点击上传</p>
</FileUpload>
</template>
<script>
// 引入 xl_alioss_vue
import FileUpload from 'xl_alioss_vue'
export default {
components: {
FileUpload
},
data() {
return {
imgUrl:''
}
},
methods:{
upLoadImgEnd(data){
this.imgUrl = data
},
upload(data,file,startLoad){
upload(Object.assign({},data,{file}))
}
},
created() { },
}
</script>
这里可以看到 xl_alioss_vue 插件有三个属性:
url :这个url 是请求一些 alioss 认证的信息的。( 由开发后端提供,后面将alioss 时候,介绍下 )
upLoadImgEnd(data) 上传结束后函数,data 为返回的图片 url
upload (data,file,startLoad) 这里如果没有的这个属性的话,会直接上传,不需要startLoad
data : 是后端返回的 alioss 的认证信息
file : 上传文件
startLoad : 开始上传函数
这里是上传时候数据结构。
所有在这里添加了一个数据处理的函数 upload 进行中转,就是为了把数据处理为一下格式
data = {
accessid,
policy,
signature,
dir,
file,
}
如果这里没有 upload 属性将不会去特意处理后端返回的 alioss 信息。
直接去传入后端返回的 alioss 数据信息进行图片上传
可以能会出现数据结构不正确而报错。
预览效果:
xl_alioss_react 的安装和应用
安装:
yarn add xl_alioss_react
使用:
import React from 'react';
import FileUpload from 'xl_alioss_react' export default class Main extends React.Component {
state = {
imgUlr:''
}
render() {
return (
<div style={{padding:30,fontSize:30}}>
<FileUpload
url='http://127.0.0.1:8088/common/upload/alioss/vue'
uploadEnd={(data) => {
this.setState({
imgUlr:data
})
}}
upload={(data, file, load) => {
load(Object.assign({}, data, {file}))
}}
>
上传
</FileUpload>
<div>
{this.state.imgUlr?
<img src={this.state.imgUlr} alt=""/>:''}
</div>
</div>
)
}
}
这里的三个属性和 vue 组件是相同的,所以不做多的解释。
预览效果:
开发组件需要的知识:
1、阿里云 oss 上传方法
2、vue 和 react 的相关知识
3、阿里云 oss 对象存储
介绍
阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量、安全、低成本、高可靠的云存储服务。
您可以通过调用 API,在任何应用、任何时间、任何地点上传和下载数据,也可以通过 Web 控制台对数据进行简单的管理。
OSS 适合存放任意类型的文件,适合各种网站、开发企业及开发者使用
我们可以把我们的静态资源存放在上面。
并且 oss 有各种优势:
方便、快捷的使用方式
强大、灵活的安全机制
丰富、强大的增值服务
具体了解,请求浏览阿里云对象存储 : 对象存储
上传图片相关知识介绍
这里我们引用到的是阿里云 oss 的 web 端上传
关于前端上传阿里云一共提供了四种方法:
如果想了解更多的知识,可以自己浏览相关文章。
本文章的组件都是基于 服务器签名后直传 的。
服务器签名直传
原理介绍:
服务端签名后直传的逻辑图如下:
流程如下:
用户发送上传Policy请求到应用服务器。
应用服务器返回上传Policy和签名给用户。
用户使用Plupload直接上传数据到OSS。
因为我们是大前端,所以后端的我就不解释了。。
后端的老板可以看案例,非常齐全
在这里着重介绍一下后端返回的 Policy 信息
返回的结构:
{
accessid // 阿里云分配的 Access Key Id
policy // 生产的认证信息
signature // 计算处理的签名
}
上面的数据是直传 oss 所需要的数据
如下:
let curDate = new FormData()
const key = options.dir + new Date().getTime() + '_' + options.file.name
curDate.append("OSSAccessKeyId", options.accessid);
curDate.append("policy", options.policy);
curDate.append("Signature", options.signature);
curDate.append("key", key);
curDate.append("success_action_status", '200');
curDate.append('file', file)
这是直传的时候需要的数据。
阿里云 oss 相关的知识已经介绍完成。。
4、node 作为服务端生产 Policy
预备知识:
1、express 后端基于 node 的应用开发框架
2、node - crypto 用于加密解密模块
3、阿里云加密生产 Policy 的知识 ( 这个没有找到文档,我是通过 PHP 案例修改的 )
开发及其详解
router.get('/alioss/vue', (req, res) => {
let time = new Date(new Date().getTime() + 30000).formatDate('yyyy-MM-ddThh:mm:ssZ')
let policyObj = JSON.stringify({
"expiration": time,
"conditions": [
// 文件大小
["content-length-range", 0, 1048576000], ["starts-with", "$key", dir]
]
})
let policy = new Buffer(policyObj).toString('base64');
let signature = crypto.createHmac('sha1', 'OEwkBpLfdoHCAbAoWXt5XFe4tiUwhX').update(policy).digest().toString('base64');
res.end(JSON.stringify(
{
accessid: 'LTAIhf0LGhtEKTe8',
host:aliossHost,
dir,
policy,
expire:time,
signature
}
));
})
详解:
let time = new Date(new Date().getTime() + 30000).formatDate('yyyy-MM-ddThh:mm:ssZ')
生成一个过期时间
这里是用当前时间加上 30 秒,提供给 Policy 对象
let policyObj = JSON.stringify({
"expiration": time,
"conditions": [
// 文件大小
["content-length-range", 0, 1048576000], ["starts-with", "$key", dir]
]
})
定义 Policy 对象
expiration : 这个是过期时间
conditions : 一些规则数组
content-length-range : 文件的长度范围
starts-with : 只能上传某一个目录,这里是 dir 目录
let policy = new Buffer(policyObj).toString('base64');
将 Ploicy 对象转为 base64 字符串。
let signature = crypto.createHmac('sha1', key ).update(policy).digest().toString('base64');
这里由 policy 对象的 base64 的字符串 、阿里云oss 的 key 通过 crypto 进行 sha 加密,
返回 base64 的加签字符串
res.end(JSON.stringify(
{
accessid: id,
host:aliossHost,
dir,
policy,
expire:time,
signature
}
));
accessid : 阿里云提供的 AccessId
host : 上传到阿里云到地址
dir :要上传到目录
policy : oss 需要到凭证
expire : 过期时间
signature : 加签到字符串
node 的加密模块基本完成,这里可以直接引用。
5、前端代码开发
这里只会介绍 vue 的组件开发。
组件的模版:
介绍:
<slot></slot> : 这里有一个 slot 插槽,是用来存放自组件的。这样我们点击该组件包裹的元素都是可以触发上传的
input : 适用于来上传的 form 表单
js 模块介绍
介绍:
uloadImg : 很显然这里的这个方法是触发上传动作的
doUpload : 这里是和后端交互,获取 oss 上传的凭证
uploadOss : 这里是得到 oss 上传凭证后,上传到 oss 上面。
大概介绍了下...
具体代码源码: vue/axios实现阿里云oss的图片上传组件
小结巴巴博客园 https://www.cnblogs.com/jiebba/p/9597995.html
XiaoLong's Blog
阿里oss上传图片react组件alioss-react,vue组件alioss-vue (不用我先收藏着,后端看下前端处理方法)的更多相关文章
- vue系列---Vue组件化的实现原理(八)
_ 阅读目录 一. 什么是Vue组件? 如何注册组件? 1.1 全局注册组件 1.2 局部注册组件 二:组件之间数据如何传递的呢? 1) props 2) $emit 3) 使用$ref实现通信 4) ...
- vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法
首先,vue和阿里云oss上传图片结合参考了 这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...
- ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...
- Web应用界面好帮手!DevExtreme React和Vue组件全新功能上线
行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将主要介绍DevExtremev19.1中React组件响应式应用程序布局模板及CLI工具.本地React图表,和Vue组 ...
- react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)
第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...
- c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件
废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...
- React的JSX语法及组件
最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...
- React(17)异步组件
26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...
- React后台管理系统-添加商品组件
引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MU ...
随机推荐
- Java三大特性之继承
二.类的继承 1. 概念:从已有的类中派生出新的类,新的类能吸收已有类的属性和行为,并能扩展新的能力. 2. 一个不由任何类派生出来的类称为基类,一个派生类最近的上层类称为该类的父类,从某一类派生出来 ...
- Linux之 if命令——简单的shell文件
如何写一个shell文件,写一个小脚本 1.新建一个脚本文件:vi demo.sh 2.追加执行权限: chmod u+x demo.sh 3.执行脚本:./demo.sh 4.什么是脚本?把一堆命令 ...
- expand - 把 tab 符转换为空格符
总览 (SYNOPSIS) ../src/expand [OPTION]... [FILE]... 描述 (DESCRIPTION) 把 各文件 FILE 中的 tab 符 转换为 空格符, 然后 写 ...
- DECLARE - 定义一个游标
SYNOPSIS DECLARE name [ BINARY ] [ INSENSITIVE ] [ [ NO ] SCROLL ] CURSOR [ { WITH | WITHOUT } HOLD ...
- ADB相关指令实例详解
1.获取物理设备相关信息: adb devices 2.apk安装 2.1 新的应用(该应用未安装) adb -s 设备序列号 install apk路径 2.2 应用已安装,重安装覆盖 adb -s ...
- js 简单制作键盘模拟
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...
- java(List或Array数组)求交集、并集、差集, 泛型工具类
业务需要求不同类型的交集.并集.差集为避免代码冗余编写工具类. 注:list 转数组需传入数组,如果将原数组传入将会改变原数组的值,同时泛型数组又不可以实例化,解决方案:Arrays.copyOf(n ...
- 阿里云服务器ecs配置之安装mysql
安装mysql数据库 1.安装工作: 下载 mysql 源安装包 [root@ming ~]# wget http://dev.mysql.com/get/ ...
- Java学习之File类理解
File类是io包中唯一代表磁盘文件本身的对象.File类定义了一些与平台无关的方法来操作文件,可以通过调用File类中的方法,实现创建.删除.重命名文件等.File类的对象主要用来获取文件本身的一些 ...
- luogu2633 Count on a tree
主席树放到树上而已 #include <algorithm> #include <iostream> #include <cstdio> using namespa ...