1、首先安装依赖
npm install ali-oss
2、封装client
var OSS = require('ali-oss').Wrapper
export function client() {
var client = new OSS({
region: '。。。',
accessKeyId: '。。。',
accessKeySecret: '。。。。',
bucket: '。。。'
}) //后端提供数据
return client
}
3、页面使用
- HTML
<el-upload :http-request="Upload" :multiple="true"
:show-file-list="false" action="">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
因为样式为自定义的 所以没有用element的自动的属性，这里配置根据项目需求，如果需要自定义，按照以下配置
http-request：覆盖默认的上传行为，可以自定义上传的实现
show-file-list：是否显示已上传文件列表，默认是true
multiple：是否支持多选文件
action：必选参数，上传的地址
（如果不自定义上传行为，可以直接在action配置地址就行，没有地址可以为空，但是不能不写action）
- js
引入之前封装的连接阿里服务器的client
import { client } from '@/utils/alioss'
上传方法
Upload(file) {
var fileName = 'banner' + file.file.uid
//定义唯一的文件名，打印出来的uid其实就是时间戳
client().put(fileName, file.file).then(
result => {
// 大功搞成
//下面是如果对返回结果再进行处理，根据项目需要，下面是我们自己项目所用的，仅供参考
this.fileList[0] =
{
'name': result.name,
'url': result.url
}
uploadBannerPic(this.fileList).then(res => {
//根据需要可能项目还需对自己的数据库进行保存
})
})
},
