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 有各种优势:
方便, 快捷的使用方式
强大, 灵活的安全机制
丰富, 强大的增值服务
具体了解, 请求浏览阿里云对象存储 : 对象存储 https://help.aliyun.com/product/31815.html?spm=a2c4g.11186623.6.539.2c187eacsmEGNi
上传图片相关知识介绍
这里我们引用到的是阿里云 oss 的 web 端上传
关于前端上传阿里云一共提供了四种方法:
web 端直传 https://help.aliyun.com/document_detail/31923.html?spm=a2c4g.11186623.6.635.8a896212AjZApA
Javascript 客户端签名直传 https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.636.6a1e6212RI8Sub
服务器签名后直传 https://help.aliyun.com/document_detail/31926.html?spm=a2c4g.11186623.6.637.79d42f080B27rb
服务器签名直传设置回调上传 https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.6.638.314c4382Otyjoc
- {
- accessid // 阿里云分配的 Access Key Id
- policy // 生产的认证信息
- signature // 计算处理的签名
- }
- 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)
- 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 policyObj = JSON.stringify({
- "expiration": time,
- "conditions": [
- // 文件大小
- ["content-length-range", 0, 1048576000],
- ["starts-with", "$key", dir]
- ]
- })
- res.end(JSON.stringify(
- {
- accessid: id,
- host:aliossHost,
- dir,
- policy,
- expire:time,
- signature
- }
- ));
来源: https://www.cnblogs.com/jiebba/p/9597995.html