vue element-ui el-upload组件 上传图片到阿里云OSS

阿里云那边的配置就先不说了.遇到跨域的问题看这里 https://help.aliyun.com/document_detail/31870.html?spm=a2c4g.11186623.4.1.4fec49e8JjFWF9

直接上代码.

1.下载安装 ali-oss

npm i ali-oss --save

2. 新建一个文件  aliyun.oss.client.js 如下

/**
 * 阿里云oss上传工具
 *
 *  @description conf: {
                region: null,
                accessKeyId: null,
                accessKeySecret: null,
                bucket: null,
                stsToken: null
            }

 */
import OSS from 'ali-oss';
export default (conf) => {
    return new OSS(conf);
};

3.组件内部使用 Upload.vue

<template>
    <el-upload
        class="upload"
        action=""
        :drag="true"
        :multiple="true"
        :file-list="images"
        :http-request="uploadHttp"
        :before-upload="beforeAvatarUpload"
        :on-remove="handleRemove"
        list-type="picture">
        <i class="el-icon-plus avatar-uploader-icon"></i>
        <div class="el-upload__tip" slot="tip">只能上传jpg/jpeg/png文件，且不超过500kb</div>
    </el-upload>
</template>
<script type="text/ecmascript-6">
import ossClient from '@/common/method/aliyun.oss.client';
export default {
    name: 'Upload',
    data () {
        return {
            images: [],
            uploadConf: {
                region: null,
                accessKeyId: null,
                accessKeySecret: null,
                bucket: null,
                stsToken: null
            }
        };
    },
    methods: {
		/**
		 * 初始化
		 */
        async init () {
            //获取阿里云token  这里是后台返回来的数据
            const aliyun = {
                Region: '你的Region  注意 这个只要 空间名 不要 http:// 和 .aliyunoss.com !!',
                AccessKeyId: '你的AccessKeyId',
                AccessKeySecret: '你的AccessKeySecret',
                Bucket: '你的Bucket',
                SecurityToken: '你的SecurityToken'
            };
            const {Region, AccessKeyId, AccessKeySecret, Bucket, SecurityToken} = aliyun && aliyun.data;
            this.uploadConf.region = Region;
            this.uploadConf.accessKeyId = AccessKeyId;
            this.uploadConf.accessKeySecret = AccessKeySecret;
            this.uploadConf.bucket = Bucket;
            this.uploadConf.stsToken = SecurityToken;
        },

        /**
         * 阿里云OSS上传
         */
        uploadHttp({ file }) {
            const { imgName } = 'ALIOSS_IMG_';
            const fileName = `${imgName}/${Date.parse(new Date())}`;  //定义唯一的文件名
            ossClient(this.uploadConf).put(fileName, file, {
                'ContentType': 'image/jpeg'
            }).then(({res, url, name}) => {
                if (res && res.status == 200) {
                    console.log(`阿里云OSS上传图片成功回调`, res, url, name);
                }
            }).catch((err) => {
                console.log(`阿里云OSS上传图片失败回调`, err);
            });
        },

		/**
		 * 图片限制
		 */
        beforeAvatarUpload (file) {
            const isJPEG = file.name.split('.')[1] === 'jpeg';
            const isJPG = file.name.split('.')[1] === 'jpg';
            const isPNG = file.name.split('.')[1] === 'png';
            const isLt500K = file.size / 1024 / 500 < 2;
            if (!isJPG && !isJPEG && !isPNG) {
                this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
            }
            if (!isLt500K) {
                this.$message.error('单张图片大小不能超过 500KB!');
            }
            return (isJPEG || isJPG || isPNG) && isLt500K;
        },

		/**
		 * 移除图片
		 */
        handleRemove (file, fileList) {
            console.log(`移除图片回调`, fileList);
        }
    }
};
</script>

获取的token.后台返回的数据 如下

 

4.图片上传成功回调数据如下