vue +oss的上传

<template>
 ?<div class="mainBox">
 ???<div class="auth-set">
 ?????<Card :bordered="false" dis-hover>
 ???????<p slot="title">
 ?????????<Icon type="ios-list"></Icon>
 ?????????个人信息修改
 ???????</p>
 ?????<Row :gutter="20">
 ???????<Col span="12">
 ?????????<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="100">
 ???????????<FormItem label="姓名：" prop="name">
 ?????????????<Input type="text" v-model="formCustom.name"></Input>
 ???????????</FormItem>
 ???????????<FormItem label="电话：" prop="phone">
 ?????????????<Input type="text" v-model="formCustom.phone"></Input>
 ???????????</FormItem>
 ???????????<FormItem label="微信：" prop="wechat">
 ?????????????<Input type="text" v-model="formCustom.wechat"></Input>
 ???????????</FormItem>
 ???????????<FormItem label="邮箱：" prop="email">
 ?????????????<Input type="text" v-model="formCustom.email"></Input>
 ???????????</FormItem>
 ???????????<FormItem label="ZOOM入口：" prop="zoom">
 ?????????????<Input type="text" v-model="formCustom.zoom"></Input>
 ???????????</FormItem>
 ???????????<FormItem label="上传头像：">
 ?????????????<Upload
 ???????????????ref="uploads"
 ???????????????:before-upload="handleUpload"
 ???????????????:format="[‘jpg‘,‘jpeg‘,‘png‘]"
 ???????????????:on-success = ‘upSuccess‘
 ???????????????action="/"
 ???????????????:on-format-error="handleFormatError"
 ???????????????@on-error = ‘errorSuccess‘>
 ???????????????<Button type="ghost" icon="ios-cloud-upload-outline">选择上传头像</Button>
 ?????????????</Upload>
 ?????????????<img :src="imgUrl" ??class="imhHead">
 ???????????</FormItem>
 ???????????<FormItem>
 ?????????????<Button type="primary" @click="handleSubmit(‘formCustom‘)">提交</Button>
 ?????????????<!--<Button type="ghost" @click="handleReset(‘formCustom‘)" style="margin-left: 8px">Reset</Button>-->
 ???????????</FormItem>
 ?????????</Form>
 ???????</Col>
 ?????</Row>
 ???????</Card>
 ???</div>
 ?</div>
</template>

<script>
 ?import {mapActions} from ‘vuex‘
 ?import {cdInfo,cdInfoEdit} from ‘@/api/data-cd‘
 ?import {getOss} from ‘@/api/data‘
 ???export default {
 ?????name: "cd-info",
 ?????data() {
 ???????return {
 ?????????formCustom: {
 ???????????id:"",
 ???????????name:"",
 ???????????phone:"",
 ???????????wechat:"",
 ???????????email:"",
 ???????????fileName:"",
 ???????????zoom:"",
 ?????????},
 ?????????ruleCustom: {
 ?????????},
 ?????????id:‘‘,
 ?????????idPara:{
 ???????????id:‘‘
 ?????????},
 ?????????cdId:‘‘,
 ?????????imgUrl:‘‘
 ???????}
 ?????},
 ?????mounted () {
 ???????this.getUser().then(resolve => {
 ?????????console.log(resolve);
 ?????????this.id = resolve.id
 ?????????this.idPara.id = this.id
 ?????????this.formCustom.id = this.id
 ?????????console.log(this.id);
 ???????}).catch(error => console.log(‘caught‘, error));
 ???????cdInfo(this.idPara).then(res=>{
 ?????????console.log(res);
 ?????????this.formCustom.name=res.data.info.name
 ?????????this.formCustom.phone=res.data.info.phone
 ?????????this.formCustom.wechat=res.data.info.wechat
 ?????????this.formCustom.email=res.data.info.email
 ?????????this.formCustom.zoom=res.data.info.zoom
 ?????????this.formCustom.fileName=res.data.info.fileName
 ?????????this.cdId=res.data.info.cdId;
 ?????????this.imgUrl = res.data.info.fileName;
 ???????})

 ?????},
 ?????methods: {
 ???????...mapActions([
 ?????????‘getUser‘,
 ???????]),
 ???????handleSubmit(name) {
 ?????????this.$refs[name].validate((valid) => {
 ???????????if (valid) {
 ?????????????let ?data = Object.assign({},this.formCustom);
 ?????????????data.fileName = this.imgUrl;
 ?????????????cdInfoEdit(data).then(res=>{
 ???????????????if(res.code===0){
 ?????????????????this.$Message.success(‘保存成功!‘)
 ???????????????}
 ?????????????})

 ???????????}
 ?????????})
 ???????},
 ???????handleUpload(file){
 ?????????let data = {
 ???????????‘role‘:‘cd‘,
 ???????????‘id‘:this.cdId
 ?????????};
 ?????????getOss(data).then(res=>{
 ???????????if(res.code === 0 ){
 ???????????????this.getUpHead(res.data,file);
 ???????????}else{
 ?????????????this.$Message.info(‘上传头像失败‘);
 ???????????}
 ?????????})
 ?????????return false;
 ???????},
 ???????getUpHead(a,f){
 ?????????const client = new OSS.Wrapper({
 ???????????region:‘oss-cn-beijing‘,
 ???????????accessKeyId: a.accessid,
 ???????????accessKeySecret: a.accessKey,
 ???????????stsToken: ‘‘,
 ???????????bucket:a.bucket
 ?????????})
 ?????????let the = this;
 ?????????let random_name= this.random_string(5);
 ?????????client.multipartUpload(random_name, f, {

 ?????????}).then((results) => {
 ???????????console.log(results);
 ???????????the.imgUrl = results.url;
 ?????????})
 ???????},
 ???????random_string(len) {
 ?????????len = len || 32;
 ?????????let chars = ‘ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678‘;
 ?????????let maxPos = chars.length;
 ?????????let pwd = ‘‘;
 ?????????for (let i = 0; i < len; i++) {
 ???????????pwd += chars.charAt(Math.floor(Math.random() * maxPos));
 ?????????}
 ?????????pwd+=(new Date()).getTime();
 ?????????return pwd;
 ???????},
 ???????upSuccess(a){
 ?????????this.file = null;
 ?????????this.loadingStatus = false;
 ?????????this.$Message.success(‘上传文件成功‘)
 ?????????let arr = [];
 ?????????a.data.fails.forEach((val)=>{
 ???????????let data = {};
 ???????????data.name = val.data.name;
 ???????????data.message = val.message;
 ???????????arr.push(data)
 ?????????})
 ?????????this.errorData = arr;
 ???????},
 ???????errorSuccess(){
 ?????????this.file = null;
 ?????????this.loadingStatus = false;
 ?????????this.$Message.success(‘上传文件失败‘)
 ???????},
 ???????handleFormatError(file) {
 ?????????this.$Notice.info(‘上传类型不对‘);
 ???????},
 ?????}
 ???}
</script>

<style scoped>
 ?.auth-set .ivu-row {
 ???margin-bottom: 20px;
 ?}
 ?.pageWrap{
 ???text-align: center;
 ???margin-top: 30px;
 ?}
 ?.imhHead{
 ???width: 120px;
 ???height: 120px;
 ???border-radius: 5px;
 ?}
</style>