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

最新推荐文章于 2024-04-27 02:16:46 发布

原创

最新推荐文章于 2024-04-27 02:16:46 发布 · 4.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#java #oss #vue #文件上传

项目场景：

文件上传阿里云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添加的键的大小写
            formDa