vue封装上传图片

一。在components下新建 upLoadImg / index.js

<template>
  <div>
    <el-upload class="avatar-uploader" action="111" :show-file-list="false" :auto-upload="false" :on-change="handlechange">
      <div class="uploadContent">
        <div v-if="imageUrl" class="div_1">
          <img :src="imageUrl" class="avatar" />
          <span v-if="showK" class="dj" @click.stop>
            <i @click="dialogVisible = true" class="el-icon-zoom-in"></i>
            <i @click="qx()" class="el-icon-delete"></i>
          </span>
        </div>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </div>
    </el-upload>
    <div class="tips">{{ tips }}</div>
    <el-dialog :modal-append-to-body="false" :modal="false" :visible.sync="dialogVisible">
      <img width="100%" :src="imageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { uploadSTS } from '@/api/xueli/xueli'
import { v4 as uuid } from 'uuid'
const OSS = require('ali-oss')
export default {
  name: 'uploadImg',
  data() {
    return {
      imageUrl: '',
      accessKeyInfo: {},
      dialogVisible: false
    }
  },
  props: {
    imgUrl: {
      type: String,
      default: ''
    },
    tips: {
      type: String,
      default: ''
    },
    showK:{
      type:Boolean,
      default:false
    }
  },
  created() {
    this.imageUrl = this.imgUrl
  },
 watch: {
   imgUrl: function(val) {
      this.imageUrl = val
    }
  },
  methods: {
    qx(){
      this.imageUrl = ''
      this.$emit('handlechange', this.imageUrl)
    },
    createOss() {
      return new OSS({
        secure: true,
        region: this.accessKeyInfo.region,
        accessKeyId: this.accessKeyInfo.accessKeyId,
        accessKeySecret: this.accessKeyInfo.accessKeySecret,
        stsToken: this.accessKeyInfo.securityToken,
        bucket: this.accessKeyInfo.bucket
      })
    },
    async handlechange(file) {
      const data = await uploadSTS()
      this.accessKeyInfo = data.data.data
      const fileName = this.accessKeyInfo.path + uuid() + file.name.slice(file.name.lastIndexOf('.'))
      let endRes = await this.createOss().put(fileName, file.raw)
      if (endRes && endRes.url) {
        this.imageUrl = this.accessKeyInfo.host + '/' + fileName
        this.$emit('handlechange', this.imageUrl)
      }
    }
  }
}
</script>
<style scoped>
.uploadContent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
}
.uploadContent img {
  width: 100%;
  height: auto;
}
.avatar-uploader-icon {
  font-size: 40px;
}
.tips {
  color: #ff0000;
  /* font-size: 14px; */
}
.div_1 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dj {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  cursor: pointer;
}
.dj:hover {
  opacity: 1;
}
</style>

二。在需要的页面引入使用

<el-form-item label="营业执照电子版" prop="businessLicense">
    <uploadImg class="up_img" :imgUrl="ruleForm.businessLicense" tips="仅限jpg、gif、png、大小不超过10M，仅限上传1张" :showK="true" @handlechange="handlechange"></uploadImg>              
</el-form-item>

----------------------------------------------------------------------------------------------------

import uploadImg from '@/components/upLoadImg'

 

components:{

    uploadImg,

  },

methods中

//上传照片

    handlechange(file) {

      this.ruleForm.businessLicense = file

    },