<template>
    <div>
        <el-row>
            <el-col :span="20">
                <el-input v-model="imgSrc" placeholder=""></el-input>
            </el-col>
            <el-col :span="2">
                <el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    :accept="'image/*,video/*'"
                    :show-file-list="false"
                    :on-success="uploadEditorSuccess"
                    :on-error="uploadEditorError"
                    :before-upload="beforeEditorUpload">
                    <el-button icon="el-icon-picture-outline">选择图片</el-button>
                </el-upload>
            </el-col>
            <el-col :span="2">
                <el-button icon="el-icon-zoom-in"  @click="handleView(imgSrc)">预览图片</el-button>
            </el-col>
        </el-row>
        <el-dialog title="查看图片" :visible.sync="visible" append-to-body>
         <img :src="imgUrl" v-if="visible" style="width: 100%"/>
        </el-dialog>
</div>
</template>

<script>
import Cookies from 'js-cookie'
  
export default {
  data(){
    return {
      imgSrc:"",
      visible:false,
      imgUrl:"",
      uploadUrl:`${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`
    }
  },
  methods:{
     //上传图片之前async
     beforeEditorUpload(res, file){
        console.log(res);
        console.log(file);
      },
      // 上传图片成功
      uploadEditorSuccess(res, file) {
        console.log("上传成功")
        // this.$emit('upload',res, file)
        console.log(res, file);
        //拼接出上传的图片在服务器的完整地址
        let imgUrl=res.data.src;
        let type=imgUrl.substring(imgUrl.lastIndexOf(".")+1);
        console.log(type);
        this.imgSrc= imgUrl;
      },
      // 上传(文件)图片失败
      uploadEditorError(res, file) {
        console.log(res);
        console.log(file);
        //页面提示
        this.$message.error('上传图片失败')
        //取消上传动画
        this.quillUpdateImg = false;
      },
      //上传组件返回的结果
      uploadResult:function (res){
        this.uploadUrlPath=res;
      },
      handleView(url) {
            this.imgUrl = url;
            this.visible = true;
      },
  },
  created () {

  },
  //只执行一次，加载执行
  mounted () {
    console.log("开始加载")
    // 初始给编辑器设置title
  },


}
</script>