增加试卷的编辑

src/components/ImageUpload/single.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="component-upload-image">
+    <el-upload
+      :action="uploadImgUrl"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload"
+      :on-error="handleUploadError"
+      name="file"
+      :data="data"
+      :show-file-list="false"
+      :headers="headers"
+      style="display: inline-block; vertical-align: top;">
+      <div v-if="!imageUrl">
+          <div class="image-slot">
+            <i class="el-icon-plus" />
+          </div>
+      </div>
+      <div v-else class="image">
+        <el-image :src="imageUrl" :style="`width:148px;height:148px;`" fit="fill"/>
+        <div class="mask">
+          <div class="actions">
+            <span title="预览" @click.stop="dialogVisible = true">
+              <i class="el-icon-zoom-in" />
+            </span>
+            <span title="移除" @click.stop="removeImage">
+              <i class="el-icon-delete" />
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
+      <img :src="imageUrl" style="display: block; max-width: 100%; margin: 0 auto;">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/token";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/xboe/sys/xuploader/file/upload", // 上传的图片服务器地址
+      fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
+      imageUrl:'',
+      headers: {
+        'XBOE-Access-Token': getToken(),
+      },
+      data:{
+        dir:this.dir
+      }
+    };
+  },
+  props: {
+    text:{
+      type:String,
+      default:'上传图片'
+    },
+    dir:{
+      type:String,
+      default:''
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  mounted() {
+    if(this.value){
+      if(this.value.startsWith('http')){
+        this.imageUrl=this.value;
+      }else{
+        this.imageUrl=this.fileBaseUrl+this.value;
+      }
+    }else{
+      this.imageUrl='';
+    }
+    //console.log(this.imageUrl,'this.imageUrl');
+  },
+  watch:{
+    value(newVal,oldVal){
+       //console.log(newVal,'newVal');
+       if(newVal){
+         if(newVal.startsWith('http')){
+           this.imageUrl=newVal;
+         }else{
+           this.imageUrl=this.fileBaseUrl+newVal;
+         }
+       }else{
+         this.imageUrl='';
+       }
+       //console.log(this.imageUrl,'this.imageUrl');
+    },
+    immediate: true
+  },
+  methods: {
+    removeImage() {
+      this.imageUrl="";
+      this.$emit("remove",this.value);
+    },
+    handleUploadSuccess(res) {
+      this.imageUrl=res.result.httpPath;
+      this.$emit("success", res);
+      this.loading.close();
+    },
+    handleBeforeUpload() {
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    handleUploadError() {
+      this.$message({
+        type: "error",
+        message: "上传失败",
+      });
+      this.loading.close();
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+  .image-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .image-uploader .el-upload--picture-card{
+    width: 200px;
+    background-color: #fbfdff;
+    border: 1px dashed #c0ccda;
+    border-radius: 6px;
+    box-sizing: border-box;
+    width: 148px;
+    height: 148px;
+    cursor: pointer;
+    line-height: 146px;
+    vertical-align: top;
+  }
+  .image-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .image-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    text-align: center;
+    margin-top: 50px;
+    display: block;
+  }
+  .icon-text{
+    font-size: 14px;
+    display: block;
+    height: 30px;
+    line-height: 35px;
+  }
+  .avatar {
+    width: 250px;
+    height: 178px;
+    display: block;
+  }
+  .image-slot{
+    width: 148px;
+    height: 148px;
+    line-height: 148px;
+  }
+.image {
+  position: relative;
+  .mask {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 148px;
+    line-height: 148px;
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: all 0.3s;
+  }
+  &:hover .mask {
+    opacity: 1;
+  }
+}
+</style>