vue 图片上传到阿里云oss

背景：本来打算用七牛的，但后不想管理太多账号，所以选择了阿里的。因为服务器全是阿里的，很多功能用的也是阿里的。

直接开始吧！

一. 申请阿里账号，开通oss,创建Bucket（不会的童鞋自行摸索一下）

二. 配置文件

为了方便管理，全部配置在config.js里了

//config.js
//阿里云oss上传配置(*号根据自己的信息替换)
var client = new OSS.Wrapper({
    region: 'oss-cn-*****',//oss地址 
    accessKeyId: '*********',//accessKeyId
    accessKeySecret: '********',//secret
    secure: true,
    bucket: '****'//oss名字
});

export default {
    client 
} 
复制代码

accessKeyId和accessKeySecret

region和bucket

配置好以后，哪里需要直接引入config

三.上传

这里vue用的是pug模板

<template  lang='pug'>
    div
        input#upload_file1(type='file' style='display:none' ref='logo'  @change="update($event,'logo')")
            span.upwarp( @click="fileClick('logo')" v-if='hotelData.logo==""')
                i.up-icon()
            span.show-pic(v-if='hotelData.logo!=""')
                img(:src='hotelData.logo' style='width: 100%;height: 100%;')
                i.del-icon(@click="delPic('logo')")
</template>
<script>
    import config from '../../../config'//引入阿里云oss配置，路径改成你自己的
    data(){
        return {
            hotelData:{
                logo:'',
            }
        }
    }

    methods:{

        //触发上传图片input
        fileClick(name) {
            this.$refs[name].click()
        },
        //上传图片
        update:function(e,name) {
            var _file=e.target.files[0],imgUrl,self=this
            var timestamp = (new Date()).valueOf();
            //这里在文件名后加一个随机数防止下次上传名字相同的图片时服务器上的图片被替换了
            config.client.multipartUpload(_file.name+timestamp, _file).then(function (result) {
                //图片太大的话上传以后会分段（参考网友的，找不到原文了）
                if(_file.size>=100*1024){
                    imgUrl=result.res.requestUrls[0].split("?")[0]
                }else{
                    imgUrl=result.url
                }
                self.hotelData[name]=imgUrl
            }).catch(function (err) {
                console.log(err);
            });
        },
        //移除上传图片
        delPic(name){
            this.hotelData[name]=''
        },
    }
</script>
复制代码

文章部分内容参考了网友的，但是现在找不到原文了，就暂时不放原文链接了，找到再补上。复制代码