Vue實現阿里雲oss文件上傳（服務端簽名后直傳）

參考網址：https://help.aliyun.com/document_detail/31926.html

<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;
            this.$http.get('/api/v1/alioss/sign').then(function(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>