Vue获取服务端签名web端直传OSS,各种报错The bucket POST must contain the specified ‘key‘.等解决办法

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: Vue获取服务端签名web端直传OSS,各种报错The bucket POST must contain the specified ‘key‘.等解决办法

项目场景:

文件上传阿里云OSS,通常情况下的上传方式是页面先文件上传到我们的后台服务器,我们的后台服务器在上传到OSS,这样的话一个文件的上传操作就相当于消耗了两份服务器带宽,

流程图如图所示:

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

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

具体的官方信息描述可以点击这里查看:
https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.6.1744.17e03bd38ehYZz

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

<template>
    <div class="test">
        <div>
            <input type="file" id="file" name="file" />
            <a @click="upload()" href="javascript:;">上传</a>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
        }
    },
    mounted() {
        this.getOssToken();
    },
    methods: {
        //获取上传通行证
        getOssToken(){
            var _self = this;
             axios.get('/api/oss/getPolicy').then(function(res){
          console.log(res);
                if(res.data.code == 200){
                    _self.aliyunOssToken = res.data.data;
                }else{
                    _self.$message.error(res.data.message);
                }
            }).catch(function(error){
                console.log(error);
            })
        },
        upload(){
            var _self = this;
            var getSuffix = function (fileName) {
                var pos = fileName.lastIndexOf(".");
                var suffix = '';
                if (pos != -1) {
                    suffix = fileName.substring(pos);
                }
                return suffix;
            }
            var file = $("#file").val();
            if (file.length == 0) {
                alert("请选择文件");
            }
            var filename = new Date().getTime() + getSuffix(file);
            var formData = new FormData();
            //注意formData里append添加的键的大小写
            formData.append('key', _self.aliyunOssToken.dir + filename); //存储在oss的文件路径
            formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); //accessKeyId
            formData.append('policy', _self.aliyunOssToken.policy); //policy
            formData.append('Signature', _self.aliyunOssToken.signature); //签名
//如果是base64文件,那么直接把base64字符串转成blob对象进行上传就可以了
            formData.append("file", $("#file")[0].files[0]);
            formData.append('success_action_status', 200); //成功后返回的操作码
            var url = _self.aliyunOssToken.host;
            var fileUrl = _self.aliyunOssToken.host +'/'+ _self.aliyunOssToken.dir + filename;
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                // async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(fileUrl);
                    console.log(data);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }
    }
}
</script>

这里需要注意的是:

如果你遇到了

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Error>\n  <Code>InvalidArgument</Code>\n  <Message>The bucket POST must contain the specified 'key'. If it is specified, please check the order of the fields</Message>\n  <RequestId>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<String>  文件路径和大小集合
     * @ Param ossClient  oss客户端
     * @ Param bucketName bucket名称
     * @Title: queryAllObject
     * @ Description: 查询某个bucket里面的所有文件
     */
    public List<String> queryAllObject() {
        List<String> 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
     */
    public void download(String objectName, HttpServletResponse response) {
        BufferedInputStream input = null;
        OutputStream outputStream;
        OSSObject ossObject;
        try {
            objectName = objectName.replace(fileHost + "/", "");
            response.reset();
            response.setCharacterEncoding("utf-8");
            response.setContentType("application/x-msdownload");
            String substring = objectName.substring(objectName.lastIndexOf("/") + 1);
            response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(substring, "UTF-8"));
            // ossObject包含文件所在的存储空间名称、文件名称、文件元信息以及一个输入流。
            ossObject = getOssClient().getObject(bucketName, objectName);
            input = new BufferedInputStream(ossObject.getObjectContent());
            byte[] buffBytes = new byte[1024];
            outputStream = response.getOutputStream();
            int read;
            while ((read = input.read(buffBytes)) != -1) {
                outputStream.write(buffBytes, 0, read);
            }
            input.close();
            ossObject.close();
            outputStream.close();
        } catch (IOException ex) {
            ex.printStackTrace();
        } finally {
            try {
                if (input != null) {
                    input.close();
                }
            } catch (IOException e) {
//                e.printStackTrace();
            }
        }
    }
    public void downloadObject(String objectName) {
        // 创建OSSClient实例。
        OSS ossClient = getOssClient();
        // 下载Object到本地文件,并保存到指定的本地路径中。如果指定的本地文件存在会覆盖,不存在则新建。
        // 如果未指定本地路径,则下载后的文件默认保存到示例程序所属项目对应本地路径中。
        objectName = objectName.replace(fileHost + "/", "");
        ossClient.getObject(new GetObjectRequest(bucketName, objectName), new File("D:\\localpath\\"+objectName));
        // 关闭OSSClient。
        ossClient.shutdown();
    }
    /**
     * 文件及文件夹的递归删除
     *
     * @ Param file
     */
    private static void deleteFile(File file) {
        if (file.isDirectory()) {
            File[] files = file.listFiles();
            assert files != null;
            for (File f : files) {
                deleteFile(f);
                //将循环后的空文件夹删除
                if (f.exists()) {
                    f.delete();
                }
            }
        } else {
            file.delete();
        }
    }
    /**
     * @ Author: 马超伟
     * @ Date: 2021/5/7 18:16
     * @ Params: []
     * @ return: cc.mrbird.febs.common.entity.FebsResponse
     * @ Description: 前台获取文件上传签名授权
     */
    public FebsResponse policy() {
        //https://gulimall-hello.oss-cn-beijing.aliyuncs.com/hahaha.jpg
        // callbackUrl为 上传回调服务器的URL,请将下面的IP和Port配置为您自己的真实信息。
//        String callbackUrl = "http://88.88.88.88:8888";
        String filePath = new DateTime().toString("yyyy/MM/dd");
        String dir = "file/" + filePath; // 用户上传文件时指定的前缀。
        Map<String, String> respMap = null;
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
            String postPolicy = getOssClient().generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes(StandardCharsets.UTF_8);
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = getOssClient().calculatePostSignature(postPolicy);
            respMap = new LinkedHashMap<>();
            respMap.put("accessid", accessKeyId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", fileHost);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            // respMap.put("expire", formatISO8601Date(expiration));
        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        }
        return new FebsResponse().success().put("data", respMap);
    }
}

总结

遇到问题并不可怕,可怕的是找不出来问题在哪, 这种调用人家方法的,就按照人家的要求一步步走就行了,自己的任何‘**投机取巧、标新立异’**都是行不通的。

找到报错信息,去官方文档查阅‘常见问题’,解决起来就轻松多了。

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
4月前
|
前端开发 JavaScript 安全
入门Vue+.NET 8 Web Api记录(一)
入门Vue+.NET 8 Web Api记录(一)
166 4
|
4月前
|
Web App开发 JavaScript 前端开发
[译] 用 Web Worker 改善 Vue 组件性能
[译] 用 Web Worker 改善 Vue 组件性能
|
2月前
|
SQL 安全 关系型数据库
PHP作为一种流行的服务端脚本语言,在Web开发领域具有显著的优势
【10月更文挑战第11天】PHP作为一种流行的服务端脚本语言,在Web开发领域具有显著的优势
55 0
|
3月前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
4月前
|
缓存 监控 前端开发
WEB前端三大主流框架:React、Vue与Angular
在Web前端开发中,React、Vue和Angular被誉为三大主流框架。它们各自具有独特的特点和优势,为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。
309 6
|
5月前
|
消息中间件 JavaScript Java
关于如何提高Web服务端并发效率的异步编程技术
【7月更文挑战第4天】异步编程技术是提升Web服务并发效率的关键。包括: 1. 事件驱动编程,如Node.js的事件回调; 2. 异步任务队列,利用消息队列如RabbitMQ或Kafka解耦处理; 3. 异步I/O,Java的CompletableFuture实现非阻塞操作; 4. 协程,Python的async/await提供同步感的异步执行; 5. 线程/进程池,通过固定资源池管理并发任务,减少系统开销。 这些技术能增强系统性能和响应速度。然而,异步编程也需考虑正确性、稳定性和调试挑战。
|
5月前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
428 6
|
4月前
|
开发框架 JavaScript .NET
Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问
Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问
53 0
|
6月前
|
监控 Serverless 持续交付
阿里云云效产品使用问题之如何让流水线支持构建 flutter web 应用到 OSS
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
6月前
|
存储 负载均衡 应用服务中间件
Web架构&OSS存储&负载均衡&CDN加速&反向代理&WAF防护
Web架构&OSS存储&负载均衡&CDN加速&反向代理&WAF防护
113 1