我报错的原因是 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. Synchronized的实现原理(汇总)

      一.Java中synchronized关键字的作用 总所周知,在并发环境中多个线程对同一个资源进行访问很可能出现脏读等一系列线程安全问题.这时我们可以用加锁的方式对访问共享资源的代码块进行加锁,以 ...

  2. NOIP模拟赛 打铁的匠 题解

    [问题描述] Mark Douglas是一名优秀的锻造师.与他优秀的锻造水平不相符,他非常穷,以至于很多好刀都因为缺少素材缺少资金无法打造. Mark把他有能力锻造的所有n种刀建成了一棵锻造树,除了第 ...

  3. PAT B1031 查验身份证(15)

    AC代码 #include <cstdio> #include <iostream> using namespace std; const int max_n = 110; / ...

  4. STL map 常见用法详解

    <算法笔记>学习笔记 map 常见用法详解 map翻译为映射,也是常用的STL容器 map可以将任何基本类型(包括STL容器)映射到任何基本类型(包括STL容器) 1. map 的定义 / ...

  5. 关于php性能优化

    php性能优化 1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方 ...

  6. C# HttpWebRequest向远程地址Post文件

    HttpWebRequest向远程地址Post文件 /// <summary> /// 上传文件到远程服务器 /// </summary> /// <param name ...

  7. Spring boot data jpa 示例

    一.maven pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns ...

  8. C语言写郑州大学校友通讯录

    #include <stdio.h> #include <string.h> #include <stdlib.h> #define LEN sizeof(stru ...

  9. O052、Create Volume 操作 (Part III)

    参考https://www.cnblogs.com/CloudMan6/p/5617980.html       Jun 20 17:15:56 DevStack-Rocky-Compute-22 c ...

  10. JavaScript内置排序方法sort实现排序操作

    var arr = [10,8,6,9,1,7,2,13,5,1,9]; //sort排序 arr.sort(function(a,b){ //可以改变数组本身的排序方法 return a-b; }) ...