首先需要弄一个阿里云存储。然后配置一下。前端就可以直接上传图片并回显。
可在父级组件定义上传图片类型以及大小。默认为500kb。样式可以自适应调整。
<template> ???<div class="upLoat"> ???????<a href="javascript:;" class="file">上传图片 ???????????<input type="file" :accept="typeArr" @change="upload($event)"> ???????</a> ???</div></template><script> ???import {Toast} from ‘mint-ui‘; ???export default { ???????props ????: [‘data‘, ‘typeArr‘, ‘size‘], ???????data(){ ???????????return { ???????????????client ?: ‘‘, ???????????????fileSize: 500000 ???????????} ???????}, ???????created(){ ???????????if (this.size) { ???????????????this.fileSize = this.size; ???????????} ???????????this.client = new OSS.Wrapper({ ???????????????region ????????: process.env.region, ???????????????secure ????????: true, ???????????????accessKeyId ???: process.env.accessKeyId, ???????????????/*这两者到阿里云控制台获得*/ ???????????????accessKeySecret: process.env.accessKeySecret, ???????????????bucket ????????: process.env.bucket /*装图片的桶名*/ ???????????}); ???????}, methods: { ???????????/**上传图片**/ ???????????upload(event){ ???????????????var self = this; ???????????????var file = event.target.files[0]; ???????????????var type ???= file.name.split(‘.‘)[1]; ???????????????var storeAs = this.getUuid() + ‘.‘ + type; ???????????????var boolean = true; ???????????????if (file.size > this.fileSize) { ???????????????????Toast(‘亲,图片不能超过!‘ + this.fileSize / 1000 + ‘kb‘); ???????????????????return false; ???????????????} ???????????????if (this.typeArr && this.typeArr.indexOf(type) > 0) { ???????????????????boolean = false; ???????????????} ???????????????if (boolean) { ???????????????????Toast(‘上传图片格式不支持!请选择‘ + this.typeArr); ???????????????????return false; ???????????????} ???????????????this.client.multipartUpload(storeAs, file).then(function (result) { ???????????????????self.data.url = result.res.requestUrls[0].split(‘?‘)[0]; ???????????????}).catch(function (err) { ???????????????????console.log(err); ???????????????}); ???????????}, ???????????getUuid() { ???????????????var len ??= 32; //32长度 ???????????????var radix = 16; //16进制 ???????????????var chars = ‘0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz‘.split(‘‘); ???????????????var uuid ?= [], ???????????????????i; ???????????????radix ????= radix || chars.length; ???????????????if (len) { ???????????????????for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]; ???????????????} else { ???????????????????var r; ???????????????????uuid[8] = uuid[13] = uuid[18] = uuid[23] = ‘-‘; ???????????????????uuid[14] = ‘4‘; ???????????????????for (i = 0; i < 36; i++) { ???????????????????????if (!uuid[i]) { ???????????????????????????r ??????= 0 | Math.random() * 16; ???????????????????????????uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; ???????????????????????} ???????????????????} ???????????????} ???????????????return uuid.join(‘‘); ???????????} ???????} ???}</script><style scoped lang="less"> ???.file { ???????position: relative; ???????left: .26rem; ???????top: .2rem; ???????display: inline-block; ???????background: #32d582; ???????border: 1px solid #99D3F5; ???????border-radius: 4px; ???????padding: 4px 12px; ???????overflow: hidden; ???????color: white; ???????text-decoration: none; ???????text-indent: 0; ???????line-height: 20px; ???} ???.file input { ???????position: absolute; ???????font-size: 100px; ???????right: 0; ???????top: 0; ???????opacity: 0; ???}</style>父级组件：
??????<up-Load class="files" :data="item" ????????????????????????????????typeArr="image/png,image/jpg,image/gif,image/jpeg" size="50000"></up-Load>
vue上传阿里云图片组件
原文地址：http://www.cnblogs.com/wjd2221/p/7777250.html