Vue获取服务端签名web端直传OSS，各种报错The bucket POST must contain the specified ‘key‘

而如果项目的文件或者图片上传业务比较大的话，显然这对服务器来说是一个不必要的开销。

当然，我们也有优化的解决办法，通过服务端给我们生成一个允许我们上传文件到OSS的签名，我们前端项目拿到这个签名去直接上传到OSS，这样就减少了额外的带宽开销，流程图如下所示：

[具体的官方信息描述可以点击这里查看：

https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.6.1744.17e03bd38ehYZz]( )

---

Vue获取服务端签名web端直传OSS

---

<a @click=“upload()” href=“javascript:;”>上传

这里需要注意的是：

如果你遇到了

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\n InvalidArgument\n The bucket POST must contain the specified 'key'. If it is specified, please check the order of the fields\n 60950F076AD6D5

这种错误的话，那么可能，是你的key字段不存在，这里所有的字段名称一定要和官方文档给定的一致，否则就会报错，注意大小写。

如果不是的话，那么你可能就是遇到了跟我一样的错误，如图所示：

查阅官方文档后，官方文档给出的解释是这样的，点击查看：

如图所示：

如果还有其他错误，可对照官方文档一步步排查。

Java后台授权代码

---

这里我也给贴出来吧，省得你再去翻看官方文档了：

有点多，你就看你有用的就行：

package cc.mrbird.febs.external.oss;

import cc.mrbird.febs.common.entity.FebsResponse;

import cc.mrbird.febs.common.exception.FebsException;

import cc.mrbird.febs.common.utils.RandomUtil;

import com.aliyun.oss.OSS;

import com.aliyun.oss.OSSClientBuilder;

import com.aliyun.oss.common.utils.BinaryUtil;

import com.aliyun.oss.model.*;

import lombok.Data;

import org.joda.time.DateTime;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.stereotype.Service;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;

import java.io.*;

import java.net.URLEncoder;

import java.nio.charset.StandardCharsets;

import java.util.*;

/**

• @ Author 马超伟

• @ Date 2021-04-30 09:21

• @ Description:

• @ Version:

*/

@Data

@Service

public class OssFileUpload {

@Value(“${aliyun.oss.file.endpoint}”)

private String endpoint;

@Value(“${aliyun.oss.file.keyid}”)

private String accessKeyId;

@Value(“${aliyun.oss.file.keysecret}”)

private String accessKeySecret;

@Value(“${aliyun.oss.file.filehost}”)

private String fileHost;

@Value(“${aliyun.oss.file.bucketname}”)

private String bucketName;

@Value(“${aliyun.oss.file.callbackUrl}”)

private String callbackUrl;

@Value(“${aliyun.oss.file.baseDir}”)

private String dir;

public OSS getOssClient() {

OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

ossClient.setBucketAcl(bucketName, CannedAccessControlList.PublicRead);

return ossClient;

}

/**

• @ Author: 马超伟

• @ Date: 2021/4/30 10:59

• @ Params: [file, basePath]

• @ return: java.lang.String

• @ Description: 文件上传

*/

public String upload(MultipartFile file, String basePath) {

String uploadUrl;

try {

//判断oss实例是否存在：如果不存在则创建，如果存在则获取

OSS ossClient = getOssClient();

//获取上传文件流

InputStream inputStream = file.getInputStream();

//构建日期路径：avatar/2019/02/26/文件名

String filePath = new DateTime().toString(“yyyy/MM/dd”);

//文件名：uuid/原始文件名到后缀

String original = file.getOriginalFilename();

String fileName = RandomUtil.getLinkNo();

String newName = fileName + “/” + original;

String fileUrl = basePath + “/” + filePath + “/” + newName;

//文件上传至阿里云

ossClient.putObject(bucketName, fileUrl, inputStream);

// 关闭OSSClient。

ossClient.shutdown();

//获取url地址

uploadUrl = fileHost + “/” + fileUrl;

} catch (IOException e) {

throw new FebsException(“文件上传异常！”);

}

return uploadUrl;

}

/**

• @return List 文件路径和大小集合

• @ Param ossClient oss客户端

• @ Param bucketName bucket名称

• @Title: queryAllObject

• @ Description: 查询某个bucket里面的所有文件

*/

public List queryAllObject() {

List results = new ArrayList<>();

try {

// ossClient.listObjects返回ObjectListing实例，包含此次listObject请求的返回结果。

ObjectListing objectListing = getOssClient().listObjects(bucketName);

// objectListing.getObjectSummaries获取所有文件的描述信息。

for (OSSObjectSummary objectSummary : objectListing.getObjectSummaries()) {

results.add(" - " + objectSummary.getKey() + " " + "(size = " + objectSummary.getSize() + “)”);

}

} catch (Exception e) {

e.printStackTrace();

}

return results;

}

/**

• 从阿里云下载单个文件

• @ Param objectName

*/

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
长，自己不成体系的自学效果低效漫长且无助。**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-jcPHa2Dl-1715701410781)]

[外链图片转存中…(img-QvOnbncE-1715701410782)]

[外链图片转存中…(img-ic3zzKWB-1715701410782)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！