vue +oss的上传

Posted 2020-12-28 anxiangff

<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>

效果如下：