文档章节

vue +oss的上传

o
 osc_1ee7cxmx
发布于 2018/08/06 16:42
字数 457
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<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" alt="" 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>

效果如下:

 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

聚焦餐饮行业,研究院昨发布数据显示

谈话,聚焦餐饮行业,研究院昨发布数据显示,今年上半年,全国餐饮行业招聘需求增长46.18%,平均月薪6387元.随着餐饮行业的快速发展,"如何留人"也成为餐饮企业的思考题. 记者了解到,中国饭店协会...

点击fojewio
51分钟前
20
0
3·15晚会曝光上海氪信、招财旺旺SDK包泄露隐私 后台上传交易验证码敏感信息

来源 | 央视 7月16日,央视3·15晚会曝光国美易卡、美的空调遥控器、姨妈日历、银码头等50多款软件中内嵌的SDK包读取、上传用户隐私问题。上海氪信信息技术有限公司、北京招财旺旺信息技术有...

镭射财经
今天
14
0
名称=''的无效表单控件不可聚焦 - An invalid form control with name='' is not focusable

问题: I have an acute problem on my website. 我的网站上有一个严重的问题。 In Google Chrome some customers are not able to proceed to my payment page. 在Google Chrome浏览器中,某......

技术盛宴
今天
14
0
Hacker News 简讯 2020-07-17

更新时间: 2020-07-17 01:01 Let’s avoid talk of ‘chemical imbalance’: it’s people in distress - (psyche.co) 让我们避免谈论“化学失衡”:这是处于困境中的人们 得分:260 | 评论:...

FalconChen
今天
92
0
【LeetCode】 59 在排序数组中查找元素的第一个和最后一个位置

题目: 解题思路: 二分法 https://leetcode-cn.com/problems/find-first-and-last-position-of-element-in-sorted-array/solution/zai-pai-xu-shu-zu-zhong-cha-zhao-yuan-su-de-di-yi-/ 代......

JaneRoad
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部