阿里雲OSS上傳文件demo

一、安裝ali-oss

npm install ali-oss --save

二、demo

此例中使用到了ElementUI的el-upload組件。由於樣式爲自定義的 因此沒有用element的自動上傳的屬性，這裏配置根據項目需求，須要自定義，能夠按照如下配置：

http-request：覆蓋默認的上傳行爲，能夠自定義上傳的實現；

show-file-list：是否顯示已上傳文件列表，默認是true；

multiple：是否支持多選文件；

action：必填參數，上傳的地址（若是不自定義上傳行爲，能夠直接在action配置地址就行，沒有地址能夠爲空，可是不能不寫action）。

<template>
    <el-upload :http-request="uploadFile" :multiple="true" :show-file-list="true" action="">
        <el-button size="small" type="primary">點擊上傳</el-button>
    </el-upload>
</template>
<script>
    import OSS from 'ali-oss'
    export default {
        data() {
            return {
                fileList: []
            }
        },
        methods: {
            uploadFile(file) {
                var client = new OSS({
                    region: 'Your region',
                    accessKeyId: 'Your AccessKeyId', 
                    accessKeySecret: 'Your AccessKeySecret',
                    bucket: 'Your bucket name'
                });
                let name = file.file.name;
                let index = name.lastIndexOf(".");
                let suffix = name.substring(index, name.length); // 後綴名 //定義惟一的文件名
                var fileName = 'photo' + file.file.uid + suffix;
                client.put(fileName, file.file).then(
                    result => {
                        //下面是若是對返回結果再進行處理，根據項目須要
                        this.fileList.push({'name': result.name, 'url': result.url});
                        console.info(this.fileList);
                    }).catch(err => {
                    console.log(err);
                })
            },
        }
    }
</script>

 

 

效果圖：