vue+element上传图片到阿里云，OSS

vue+element上传图片到阿里云，OSS
1：首先是安装依赖
复制下面代码可直接安装

npm install ali-oss

2：接着是进行配置
在项目中的src包下的utils包中创建一个alioss.js文件

3：在alioss.js文件中写入以下代码

var OSS = require('ali-oss');
export function client() {
  var client = new OSS({
    region: '',//填写Bucket所在地域
    accessKeyId: '',  //这自己keyId
    accessKeySecret: '', //这里写自己的key密码 
    bucket: 'glb-h5-image' ,// 填写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()}`
}

4：使用时，在vue页面的<script进行导入操作,如下图所示

	import {client,	getFileNameUUID} from '../../utils/alioss.js

5：html代码 这里我用的是elementUI中自带的el-upload组件，如下图所示

	<el-form-item label="图片:" prop="url">
					<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>
</el-form-item>

6：方法代码

// 上传文件之前的方法
			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) {
				var fileName = 'banner' + `${Date.parse(new Date())}` + '.jpg'; //定义唯一的文件名
				//定义唯一的文件名，打印出来的uid其实就是时间戳
				client().multipartUpload(fileName, file.file).then(
					result => {
						//此处为给自己属性进行赋值，
						 //根据需要可能项目还需对自己的数据库进行保存
						this.Addfrom.url =
							'https://glb-h5-image.oss-cn-shanghai.aliyuncs.com/' + fileName;
					})
			},

7：接下来就赶紧去你阿里云看看有没有上传成功的图片吧，最后，有什么不懂的地方欢迎留言