vue 百度云上传文件PostObject
百度云上传文件 API(PostObject)
接口描述
此接口使用HTML表单上传文件到指定bucket,用于实现通过浏览器上传文件到bucket。在PutObject操作中通过HTTP请求头传递参数,在PostObject操作中使用消息实体中的表单域传递参数,其中消息实体使用多重表单格式(multipart/form-data)编码。
该接口调用需要用到 base64和sha256加密
1、安装 js-base64
npm install js-base64 --save
使用:
const Base64 = require('js-base64').Base64
var basePolicy = Base64.encode(str)
2、安装 crypto-js
npm install crypto-js --save
使用
const CryptoJS = require('crypto-js')
let signature = CryptoJS.HmacSHA256(basePolicy, config.sk).toString()
3、具体代码如下(接口使用axios访问,)
// tslint:disabled
<template>
<div>
<van-uploader :after-read="upload" :before-read="beforeRead" />
</div>
</template> <script>
import Axios from 'axios'
const Base64 = require('js-base64').Base64
const CryptoJS = require('crypto-js')
const config = {
bcebosBucket: 'xxxx',
endpoint: 'xxxxxxxx', //Bucket所在区域域名
ak: 'xxxxx', //您的AccessKey
sk: 'xxxxx' //您的SecretAccessKey
} export default {
methods: {
data() {
return {}
},
beforeRead(file) {
debugger
if (file.type !== 'image/jpeg') {
Toast('请上传 jpg 格式图片')
return false
}
return true
},
upload(file, detail) {
debugger
/**
* bos 上传文件接口网站
* https://cloud.baidu.com/doc/BOS/s/qjwvyseos#postobject%E6%8E%A5%E5%8F%A3
*/
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
// bos参数组装 key-文件存储位置和名称
let key =
config.bcebosBucket + '/' + year + '/' + month + '/' + file.file.name
// policy 格式见网站 String
let expiration = {
expiration: this.formate(date, 'yyyy-MM-ddThh:mm:ssZ'),
conditions: [{ bucket: config.bcebosBucket }, { key: key }]
}
let str = JSON.stringify(expiration)
var basePolicy = Base64.encode(str)
let signature = CryptoJS.HmacSHA256(basePolicy, config.sk).toString() let formData = new FormData()
formData.append('key', key)
formData.append('accessKey', config.ak)
formData.append('policy', basePolicy)
formData.append('signature', signature)
formData.append('file', file.file)
Axios.post(config.endpoint, formData, {
baseURL: '',
headers: { 'content-type': 'multipart/form-data;' }
}).then(res => {
debugger
})
},
formate(time, fmt) {
var o = {
'M+': time.getMonth() + 1, //月份
'd+': time.getDate(), //日
'h+': time.getHours(), //小时
'm+': time.getMinutes(), //分
's+': time.getSeconds(), //秒
'q+': Math.floor((time.getMonth() + 3) / 3), //季度
S: time.getMilliseconds() //毫秒
}
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(time.getFullYear() + '').substr(4 - RegExp.$1.length)
)
for (var k in o)
if (new RegExp('(' + k + ')').test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ('00' + o[k]).substr(('' + o[k]).length)
)
return fmt
}
}
}
</script> <style lang="scss" scoped>
</style>
vue 百度云上传文件PostObject的更多相关文章
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- (转载)基于Bash命令行的百度云上传下载工具
原文链接:http://hi.baidu.com/meoow/item/aef5814bbd5be3e1bcf451e9 这是我根据百度云PCS的API写的一个基于bash的命令行工具, 使用了cur ...
- 关于vue使用form上传文件
在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...
- OSS阿里云上传文件 前端js下载url跨域问题
场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...
- vue.js异步上传文件前后端代码
上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...
- vue中用ajax上传文件
直接上代码 <input class="file-btn" type="file" @change="uploadCompany($event) ...
- 使用vue+iview实现上传文件及常用的下载文件的方法
首先说明一下,我们这次主要用的还是iview的upload上传组件,下面直接上代码 <Upload ref="upload" multiple='true' //是否支持多文 ...
- VUE -- 用组件上传文件和用xmlrequest上传
xmlrequest: sendForm(str, types) { var form = this.$refs.ipas_form; var oOutput = document.querySele ...
- vue + axios + formdata 上传文件带参数的爬坑之路
submitForm(event) { let formData = new FormData() formData.append('name', this.name) formData.append ...
随机推荐
- PostgreSQL中的 时间格式转化常识
下面的SQL文查询结果是 "2018-08-20 10:09:10.815125",并且返回类型可以当String处理.返回json等都方便使用. SQL> SELECT t ...
- axios和drf结合的增删改查
增删改查 查: 前端实例: mounted() { //获取所有数据 // var Base_url = 'http://paas.bktst.sh.sgcc.com.cn/t/files-check ...
- Opencv图片明暗处理
Opencv图片明暗处理 #include <iostream> #include <opencv2/opencv.hpp> using namespace std; usin ...
- 前端速查手册——Note
目录 自定义弹框(模块框) HTML5新增标签 HTML5新增属性 自定义弹框(模块框) HTML <div style="display:none" id="mo ...
- [整理]Python程序员面试前需要看的博客(持续整理)
基本素养 如何聪明的提问 面试方法 从面试官角度来告诉大家,哪些人能面试成功 如何在面试中介绍自己的项目经验 计算机系统 [面试] 迄今为止把同步/异步/阻塞/非阻塞/BIO/NIO/AIO讲的这么清 ...
- 使用JSQLParser解析SQL中涉及到的表
首先添加Maven依赖: <dependency> <groupId>com.github.jsqlparser</groupId> <artifactId& ...
- npm 全局安装路径 在哪里
注意:在Admin下,需要把隐藏文件显示出来,才能找到对应的文件路径.
- robot:接口入参为图片时如何发送请求
https://www.cnblogs.com/changyou615/p/8776507.html 接口是上传图片,通过F12抓包获得如下信息 由于使用的是RequestsLibrary,所以先看一 ...
- 基于TreeSoft实现异构数据同步
一.为了解决数据同步汇聚,数据分发,数据转换,数据维护等需求,TreeSoft将复杂的网状的同步链路变成了星型数据链路. TreeSoft作为中间传输载体负责连接各种数据源,为各种异构数据库之 ...
- 微服务Consul系列之服务注册与服务发现
在进行服务注册之前先确认集群是否建立,关于服务注册可以看上篇微服务Consul系列之集群搭建的介绍,两种注册方式:一种是注册HTTP API.另一种是通过配置文件定义,下面讲解的是基于后者配置文件定义 ...