百度云上传文件 API(PostObject)

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的更多相关文章

  1. vue 阿里云上传组件

    vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...

  2. (转载)基于Bash命令行的百度云上传下载工具

    原文链接:http://hi.baidu.com/meoow/item/aef5814bbd5be3e1bcf451e9 这是我根据百度云PCS的API写的一个基于bash的命令行工具, 使用了cur ...

  3. 关于vue使用form上传文件

    在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...

  4. OSS阿里云上传文件 前端js下载url跨域问题

    场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...

  5. vue.js异步上传文件前后端代码

    上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  6. vue中用ajax上传文件

    直接上代码 <input class="file-btn" type="file" @change="uploadCompany($event) ...

  7. 使用vue+iview实现上传文件及常用的下载文件的方法

    首先说明一下,我们这次主要用的还是iview的upload上传组件,下面直接上代码 <Upload ref="upload" multiple='true' //是否支持多文 ...

  8. VUE -- 用组件上传文件和用xmlrequest上传

    xmlrequest: sendForm(str, types) { var form = this.$refs.ipas_form; var oOutput = document.querySele ...

  9. vue + axios + formdata 上传文件带参数的爬坑之路

    submitForm(event) { let formData = new FormData() formData.append('name', this.name) formData.append ...

随机推荐

  1. PostgreSQL中的 时间格式转化常识

    下面的SQL文查询结果是 "2018-08-20 10:09:10.815125",并且返回类型可以当String处理.返回json等都方便使用. SQL> SELECT t ...

  2. axios和drf结合的增删改查

    增删改查 查: 前端实例: mounted() { //获取所有数据 // var Base_url = 'http://paas.bktst.sh.sgcc.com.cn/t/files-check ...

  3. Opencv图片明暗处理

    Opencv图片明暗处理 #include <iostream> #include <opencv2/opencv.hpp> using namespace std; usin ...

  4. 前端速查手册——Note

    目录 自定义弹框(模块框) HTML5新增标签 HTML5新增属性 自定义弹框(模块框) HTML <div style="display:none" id="mo ...

  5. [整理]Python程序员面试前需要看的博客(持续整理)

    基本素养 如何聪明的提问 面试方法 从面试官角度来告诉大家,哪些人能面试成功 如何在面试中介绍自己的项目经验 计算机系统 [面试] 迄今为止把同步/异步/阻塞/非阻塞/BIO/NIO/AIO讲的这么清 ...

  6. 使用JSQLParser解析SQL中涉及到的表

    首先添加Maven依赖: <dependency> <groupId>com.github.jsqlparser</groupId> <artifactId& ...

  7. npm 全局安装路径 在哪里

    注意:在Admin下,需要把隐藏文件显示出来,才能找到对应的文件路径.

  8. robot:接口入参为图片时如何发送请求

    https://www.cnblogs.com/changyou615/p/8776507.html 接口是上传图片,通过F12抓包获得如下信息 由于使用的是RequestsLibrary,所以先看一 ...

  9. 基于TreeSoft实现异构数据同步

    一.为了解决数据同步汇聚,数据分发,数据转换,数据维护等需求,TreeSoft将复杂的网状的同步链路变成了星型数据链路.     TreeSoft作为中间传输载体负责连接各种数据源,为各种异构数据库之 ...

  10. 微服务Consul系列之服务注册与服务发现

    在进行服务注册之前先确认集群是否建立,关于服务注册可以看上篇微服务Consul系列之集群搭建的介绍,两种注册方式:一种是注册HTTP API.另一种是通过配置文件定义,下面讲解的是基于后者配置文件定义 ...