vue+element上传图片到阿里云（可直接运行domo）

vue+element上传图片到阿里云，OSS（最简单，最详细，可在线运行domo），不要走弯路了

支持格式 jpeg，jpg，png，webp，gif

=可限制大小== 4M

安装ali-oss
npm install ali-oss

在src目录下创建alioss.js

var OSS = require('ali-oss');
export function client() {
  var client = new OSS({
    region: '',//填写Bucket所在地域
    accessKeyId: '',  //这自己keyId
    accessKeySecret: '', //这里写自己的key密码 
    bucket: '' ,// 填写Bucket名称。
	secure:true,
  })  //后端提供数据 
  return client
}
/**
 * 生成随机文件名称
 * 规则八位随机字符，加下划线连接时间戳
 */
export const getFileNameUUID = () => {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return `${+new Date()}_${rx()}${rx()}`
}

基于vue所以我是用的是element ui，不知道怎么引用的可以查看element ui官网链接: element ui.

<template>
    <el-upload class="avatar-uploader" action="" v-model="Addfrom.url" :http-request="uploadURL"
    :multiple = true :before-upload="handleBeforeUpload" :limit="8">
      <img v-if="Addfrom.url" :src="Addfrom.url" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>             
</template>
<script>
  import {client,	getFileNameUUID} from '@/utils/alioss'
  export default {
    data() {
      return {
        fileList: [],
        Addfrom:{
          url:''
        }
      };
    },
    methods: {
      // 上传文件之前
			handleBeforeUpload(file) {
				const isJPEG = file.name.split('.')[1] === 'jpeg';
				const isJPG = file.name.split('.')[1] === 'jpg';
				const isPNG = file.name.split('.')[1] === 'png';
				const isWEBP = file.name.split('.')[1] === 'webp';
				const isGIF = file.name.split('.')[1] === 'gif';
				const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
				if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
					this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
				}
				if (!isLt500K) {
					this.$message.error('单张图片大小不能超过 4mb!');
				}
				return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
			},
			uploadURL(file) {
				//注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
				var fileName = 'image/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; 
				//定义唯一的文件名，打印出来的uid其实就是时间戳
				client().multipartUpload(fileName, file.file,{
                progress: function(percentage, cpt) {
                  console.log('打印进度',percentage)
                }
              }).then((res)=>{
          //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
          //简单描述就是bucket概括，里面的域名地址，粘贴过来可以直接用
          this.Addfrom.url = 'https://xxx.xxx.aliyuncs.com/' + fileName;
          console.log(this.Addfrom.url,"this.Addfrom.url")
        })
			},

    }
  }
</script>