Element OSS上传

安装ali-oss

npm i ali-oss -D (安装到生产依赖)

<el-form-item label="头像" ref='updatePic' prop="userHeader">
	<el-upload
		action="#"
		ref="upload"
		list-type="picture-card"
		:file-list="imageList"
		:on-preview="handlePictureCardPreview"
		:on-remove="handleRemovePic"
		:before-upload="uploadBeforeUpload"
		:http-request="uploadSectionFile"
	>
		<i class="el-icon-plus"></i>
	</el-upload>
	<el-dialog :visible.sync="imgdialogVisible" append-to-body class="sub-dialog">
		<img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>
</el-form-item>

//引入oss
let OSS = require('ali-oss');
export default {
	data() {
		return {
			imageList: [],
			dialogImageUrl: '',
            imgdialogVisible: false,
			dataForm: {
              userHeader:'',
            },
		}	
	},
	methods: {          
		//删除图片
		handleRemovePic(file, fileList) {
			this.dataForm.userHeader = ''
		},
		//放大图片
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.imgdialogVisible = true;
		},
		uploadBeforeUpload(file){
			const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png');
			if (!isJPG) {
			  this.$message.error('图片格式不正确');//图片只能是 JPG/PNG 格式!
			}else{
			  this.imageList = []
			}
			return isJPG
		},
		//自定义上传
		uploadSectionFile(option){
			let file = option.file
			//获取oss的accessKeyId、accessKeySecret、securityToken
			getOssAuthInfo().then(res => {
			  let client = new OSS({
			      accessKeyId: res.accessKeyId,
			      accessKeySecret: res.accessKeySecret,
			      stsToken: res.securityToken,
			      region: 'oss-cn-hangzhou', // oss地区
			      bucket: res.bucketName
			  })
			  const date = moment(new Date()).format('YYYY-MM-DD')
			  const namearr = file.name.split(".")
			  // 定义上传文件的名字+后缀
			  const storeAs =date+'/' + this.$md5(Date.parse(new Date())+namearr[0])+'.'+namearr[1];
			  // 调用oss上传接口
			  client.multipartUpload('carplusgo-info-img/'+storeAs, file).then(response=>{
			      if (response.res.status === 200) {
			          this.imageList = [{"url":this.updateUrl+'carplusgo-info-img/'+storeAs}]
			          this.dataForm.userHeader = storeAs
			          this.$refs.updatePic.clearValidate();
			      }
			  }).catch(function (err) { console.error('error: ', err) })
			})
		},
	}
}