我报错的原因是 formData.append('file', file) 放在签名前面了

解决办法 formData.append('file', file) 一定在最后

/**
* 上传文件到 oss
* @param {} Object Sign 签名
* @param {*} file 要上传的文件
*/
export const updateFileToOSS = (sing, file) => {
// console.log(file)
const formData = new FormData()
formData.append('key', sing.key)
formData.append('OSSAccessKeyId', sing.accessid)
formData.append('policy', sing.policy)
formData.append('signature', sing.signature)
formData.append('success_action_status', '201')
formData.append('file', file) // 一定在最后
return new Promise((resolve, reject) => {
axios({
method: 'POST',
url: '/oss', // 设置代理了
data: formData,
headers:{
'Authorization': Vue.ls.get(ACCESS_TOKEN), // 请求头携带的token
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
resolve(response)
}).catch(error => {
reject(error)
})
})
}

感谢 原文 https://segmentfault.com/a/1190000019481380

Vue上传通过“服务端签名后直传”上传文件到阿里云 报错 400 Bad Request的更多相关文章

  1. 使用阿里云OSS的服务端签名后直传功能

    网站一般都会有上传功能,而对象存储服务oss是一个很好的选择.可以快速的搭建起自己的上传文件功能. 该文章以使用阿里云的OSS功能为例,记录如何在客户端使用阿里云的对象存储服务. 服务端签名后直传 背 ...

  2. 阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)

    分片上传(结合element-ui的upload组件实现自定义上传) async uploadFree(content){ let data = await this.getOssToken(); / ...

  3. python踩坑系列——报错后修改了.py文件,但是依然报错

    一开始.py文件中的函数名大小写错了,但是在终端是对的,报错: 'module' object has no attribute '某函数名' 后来就去修改.py文件.结果重新import该.py文件 ...

  4. Ali OSS服务端签名直传并设置上传回调

    服务端签名直传并设置上传回调 背景 请参考 Web端直传实践 里的背景介绍. 当采用服务端签名后直传方案后,问题来了,用户上传数据后,很多场景下,应用服务器都要知道用户上传了哪些文件,文件名字,甚至如 ...

  5. 使用axios上传文件到阿里云对象文件存储服务器oss

    背景 OSS可用于图片.音视频.日志等海量文件的存储.各种终端设备.Web网站程序.移动应用可以直接向OSS写入或读取数据.OSS支持流式写入和文件写入两种方式.使用阿里云oss做文件存储的时候,不可 ...

  6. 在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现Web端直传,服务端签名直传并设置上传回调的实现流程

    在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现本地文件上传流程 by shuijingwan · 2016/01/13 1.SDK安装 github ...

  7. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  8. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  9. 支付宝ios支付请求Java服务端签名报的一个错(ALI40247) 原创

    今天做app的支付宝支付,遇到些问题,以前做支付宝支付签名都是直接在客户端App进行,今天下了最新版本ios的支付宝支付demo,运行demo时底部有红色的显眼字体,告知用户签名必须在服务端进行... ...

随机推荐

  1. python列表与字符串、元组的区别以及列表引用的方式

    一.字符串 字符串也可以用下标取值.切片.for循环.len()取长度以及 in 和 not in 来进行操作. 但字符串是不可变的,不能被更改.只能构造一个“新的”字符串来存取你想要修改后的数据. ...

  2. HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并)

    layout: post title: HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并) author: "luowentaoaa&quo ...

  3. 从入门到自闭之Python--MySQL数据库安装

    分类: 关系型数据库:mysql oracle sqlserver sqllite 非关系型数据库:redis mongodb memcache hbase 安装: 网址:https://www.my ...

  4. Katu Puzzle POJ - 3678 (2 - sat)

    有N个变量X1X1~XNXN,每个变量的可能取值为0或1. 给定M个算式,每个算式形如 XaopXb=cXaopXb=c,其中 a,b 是变量编号,c 是数字0或1,op 是 and,or,xor 三 ...

  5. Java New IO

    1.NIO介绍 应用程序中,通常会涉及两种类型的计算:计算密集型和I/O密集型.对多数应用来说,花费在等待IO上的时间是比较大的.因此提高IO操作效率对应用的性能至关重要. 面向流的IO系统一次处理一 ...

  6. Spring 容器中 Bean 的生命周期

    Spring 容器中 Bean 的生命周期 1. init-method 和 destory-method 方法 Spring 初始化 bean 或销毁 bean 时,有时需要作一些处理工作,因此 s ...

  7. gperftools cpp wrapper

    gperftools cpp wrapper // Compile command : ${CXX} -o test_profiler.elf -DUSE_GPERFTOOLS -DDEBUG -D_ ...

  8. 数值或者电话号码被EXCEL转成了科学计数法,用XSSFCell 如何读取

    public static Map<String, Integer> readXls() throws IOException { //用来获取每一个小号重复多次,被多少账号用了.来平均 ...

  9. HTML之美化盒子

    1.    美化盒子 1.1.          美化文本 1.1.1.  字体大小[font-size]: 字符框的高度,可继承,默认值medium,16px.基准字号:浏览器设置的默认字体大小,通 ...

  10. MYSQL 删除语句(数据)

    删除数据(DELETE)     如果你失忆了,希望你能想起曾经为了追求梦想的你.   数据库存储数据,总会有一些垃圾数据,也会有一些不需要用的数据了,这些情况下,我们就可以删除这些数据,释放出一定的 ...