我报错的原因是 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. Codeforces 1178E. Archaeology

    传送门 首先一定有解,考虑归纳法证明 首先 $n<=3$ 时显然 考虑 $n=4$ 时,那么因为 $s[1]!=s[2],s[3]!=s[4]$ ,并且 $s[i] \in {a,b,c}$ 由 ...

  2. Scala学习七——包和引入

    一.本章要点 包也可也可以像内部类那样嵌套 包路径不是绝对路径 包声明链x.y.z并不自动将中间包x和x.y变成可见 位于文件顶部不带花括号的包声明在整个文件范围内有效 包对象可以持有函数和变量 引入 ...

  3. Java lesson18homework

    package com.xt.lesson19; import java.util.Scanner;import java.util.Set;import java.util.TreeSet; /** ...

  4. webpack权限控制

    const type= "a"; const menusConfig = { a: ["activity"], b: ["activity" ...

  5. Fix Scheduled Task Won’t Run for .BAT File

    Step 1: Check File/Folder Permissions The first step to fixing this issue is ensuring that the accou ...

  6. Python——用turtle画一个月饼

    今天是中秋节,首先在这里祝大家中秋快乐!那么提到中秋,我们首先想到的当然是香甜的月饼,所以我今天就在这里画一个月饼送给大家. 那么 要用Python画图,我们必须掌握并运用Turtle库,这个可以自己 ...

  7. 爬虫中什么是requests

    print(response.text) #响应的信息 print(response.headers) #获取响应头 print(response.status_code) #响应状态码 print( ...

  8. 帝国cms 此栏目暂无任何新增信息处理办法

    在做一个新网站的时候不能保证每个栏目都能填充内容,当某个栏目没有内容填充的时候总会出现“此栏目暂无任何新增信息”看着挺不舒服. 其实想删除这行字也挺简单,只需要修改下语言包即可!如下: 找到语言包文件 ...

  9. vue封装swiper

    参考:https://github.com/surmon-china/vue-awesome-swiper npm install vue-awesome-swiper --save 全局引入 imp ...

  10. 几种常用的java 实现反转的方法———reverse

    1.最简单的方法 public static String reverse1(String str) return new StringBuffer(str).reverse().toString() ...