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

野性酷女 2023-01-19 03:24 5阅读 0赞

### 目录 ###

*   *  项目场景：
     *  Vue获取服务端签名web端直传OSS
     *  Java后台授权代码
 *  总结

--------------------

## 项目场景： ##

文件上传阿里云OSS，通常情况下的上传方式是页面先文件上传到我们的后台服务器，我们的后台服务器在上传到OSS，这样的话一个文件的上传操作就相当于消耗了两份服务器带宽，  
流程图如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70]

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

当然，我们也有优化的解决办法，通过服务端给我们生成一个允许我们上传文件到OSS的签名，我们前端项目拿到这个签名去直接上传到OSS，这样就减少了额外的带宽开销，流程图如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 1]  
[具体的官方信息描述可以点击这里查看：  
https://help.aliyun.com/document\_detail/31927.html?spm=a2c4g.11186623.6.1744.17e03bd38ehYZz][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字段不存在，这里所有的字段名称一定要和官方文档给定的一致，否则就会报错，注意大小写。  
如果不是的话，那么你可能就是遇到了跟我一样的错误，如图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 3]  
[查阅官方文档后，官方文档给出的解释是这样的，点击查看：][Link 1]  
如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 4]  
如果还有其他错误，可对照官方文档一步步排查。

## 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);
        }
    
    
    }

# 总结 #

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70]: /images/20221021/2d72c977b4d74d6db7b89decdc3c5688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 1]: /images/20221021/e51568cdd2554a5babead3ac61bfcdf1.png
[https_help.aliyun.com_document_detail_31927.html_spm_a2c4g.11186623.6.1744.17e03bd38ehYZz]: https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.6.1744.17e03bd38ehYZz
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 2]: /images/20221021/c286638409f84dcb9ffcbe046aa7a31b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 3]: /images/20221021/59238654a5054d1ca4efaf803949a67a.png
[Link 1]: https://help.aliyun.com/knowledge_detail/42976.html?spm=a2c4g.11186623.2.13.11cd1a210eyJOX
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 4]: /images/20221021/4bfb8849ef38473d9a0efe5bda9ece79.png