使用VUE+element-ui & 阿里雲OSS 完成圖片/文件的上傳與使用

1、安裝Element-ui

npm i element-ui -s

2、安裝阿里雲的OSS

npm install ali-oss

3、使用element-ui 默認的 upload組件

templeate部分：

        <el-upload
                class=""
                action=""
                :show-file-list="false"
                :http-request="fnUploadRequest"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

由於我們使用了 阿里雲OSS方案，因此拋棄掉了element自帶的上傳方式，故class和action寫不寫無關緊要，需要我們自己重寫 http-request 方法

script部分:

 

//首先第一行引入 ali-oss 插件並配置：
const OSS = require('ali-oss');
const client= new OSS({
    accessKeyId: 'your access key',  // 查看你自己的阿里雲KEY
    accessKeySecret: 'your access secret', // 查看自己的阿里雲KEYSECRET
    bucket: 'your bucket name', // 你的 OSS bucket 名稱
    region: 'oss-cn-beijing', // bucket 所在地址，我的是 華北2 北京
    cname:true, // 開啟自定義域名上傳
    endpoint:"file.xxxx.live" // 自己的域名
});

 

為了不透露個人信息，均已修改過

我這里使用了 cname 和 endpoint 也就是支持上傳自定義域名，可以到阿里雲的管理后台綁定你自己的域名（需要購買），這里有沒有域名不影響使用，系統會自動分配，

更多配置查看官方文檔：

https://help.aliyun.com/document_detail/64097.html?spm=a2c4g.11186623.6.1414.725d3a07k8kyni

 重點代碼段:

export default {
    name: "upload",
    data() {
        return {
            imageUrl: '' 
        };
    },
    methods:{
        //圖片上傳成功回調
        handleAvatarSuccess(res) {
            if (res) this.imageUrl = res.url
        },
        beforeAvatarUpload(file) { 
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上傳頭像圖片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上傳頭像圖片大小不能超過 2MB!');
            }
            return isJPG && isLt2M;
        },

        async fnUploadRequest(options) {
            try {
                let file = options.file; // 拿到 file
                let fileName = file.name.substr(0,file.name.lastIndexOf('.'))
                let date = new Date().getTime()
                let fileNames = `${date}_${fileName}` // 拼接文件名，保證唯一，這里使用時間戳+原文件名
                // 上傳文件,這里是上傳到OSS的 uploads文件夾下
                client.put("uploads/"+fileNames, file).then(res=>{
                    if (res.res.statusCode === 200) {
                        options.onSuccess(res)
                    }else {
                        options.onError("上傳失敗")
                    }
                })
            }catch (e) {
                options.onError("上傳失敗")
            }
        }
    }
}

通過手動拋出 

options.onSuccess(res) 來調用 handleAvatarSuccess 函數，拿到圖片地址

使用分片上傳：

client.multipartUpload("uploads/"+fileNames, file,{
    progress: async function (p) {
        let e = {}
        e.percent = p * 100
        options.onProgress(e)
    }
}).then(res=>{
    if (res.res.statusCode === 200) {
        options.onSuccess(res)
    }else {
        options.onError("上傳失敗")
    }
})

只是把 這一點代碼更換了而已，跟最基礎的 put 上傳其實沒什么不同，但是分片上傳可以斷點續傳，一般用作大文件，而且返回值也會有所不同

multipartUpload 的 第三個參數是一個配置參數，可以參考官方文檔

https://help.aliyun.com/document_detail/111268.html?spm=a2c4g.11186623.6.1441.39932847L2sCiI

稍稍改變回調函數，也能回顯

//圖片回調
handleAvatarSuccess(res) {
　　console.log(res) // 有興趣的自己查看API的返回格式
　　if (res) this.imageUrl = res.res.requestUrls[0]
},