图片改为可以拖拽上传

src/components/Article/editItems.vue

@@ -7,12 +7,12 @@
           </el-form-item>
           <el-form-item class="imgInstructions" label="封面">
             <div class="el-form-item__content">
-               <imageUpload :value="converImage" width="133px" height="100px" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></imageUpload>
-              <dl>
+               <imageUpload :value="converImage" width="410px" height="168px" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></imageUpload>
+              <!-- <dl>
               <dt>上传封面说明</dt>
               <dd>上传为4:3(如:400*300)的png或jpg图片</dd>
               <dd>允许上传图片大小为：5MB</dd>
-            </dl>
+            </dl> -->
             </div>
 
           </el-form-item>
@@ -51,7 +51,7 @@
 import agreement from '@/components/Portal/agreement.vue'
 import { mapGetters } from 'vuex';
 import WxEditor from '@/components/Editor/index.vue';
-import imageUpload from '@/components/ImageUpload/index.vue';
+import imageUpload from '@/components/ImageUpload/artimgUpload.vue';
 import apiArticle from '@/api/modules/article.js';
 export default {
   name: 'atticleAdd',

src/components/ImageUpload/artimgUpload.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="component-upload-image" :style="`width:${width};height:${height};`"> 
+    <el-upload
+       drag
+      :action="uploadImgUrl"
+      class="image-upload"
+      list-type="picture-card"
+      :disabled="disabled"
+      :on-success="handleUploadSuccess"
+      :on-progress="handleProgress"
+      :before-upload="handleBeforeUpload"
+      :on-error="handleUploadError"
+      :accept="accept"
+      name="file"
+      :data="data"
+      :show-file-list="false"
+      :headers="headers"
+      style="display: inline-block;">
+    
+      <el-image v-if="!value" :src="value" style="width:100%;height:100%;">
+        <div slot="error" class="image-slot" >
+           <i class="el-icon-upload"></i>
+  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+        </div>
+      </el-image>
+      <div v-else class="image" :style="`width:${width};height:${height};`">
+        <el-image :src="value" :style="`width:${width};height:${height};`" fit="fill"/>
+        <div class="mask" :style="`width:${width};height:${height};`">
+          <div class="actions" :style="`line-height:${height};`">
+            <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="value" style="display: block; max-width: 100%; margin: 0 auto;">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as imageConversion from 'image-conversion';
+import { getToken } from "@/utils/token";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/xboe/sys/xuploader/file/upload", // 上传的图片服务器地址
+      headers: {
+        'XBOE-Access-Token': getToken(),
+      },
+      data:{
+        dir:this.dir
+      }
+    };
+  },
+  props: {
+    text:{
+      type:String,
+      default:'上传图片'
+    },
+    disabled:{
+      type:Boolean,
+      default:false
+    },
+    height:{
+      type:String,
+      default:'150px'
+    },
+    width:{
+      type:String,
+      default:'150px'
+    },
+    dir:{
+      type:String,
+      default:''
+    },
+    accept:{
+      type:String,
+      default:'.png,.jpg,.gif'
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    // 值为  10MB  500KB 等有MB或KB后缀的形式
+    fileSizeLimit:{
+      type: String,
+      default: '10MB',
+    },
+    // 按比率压缩，优先于按大小
+    compress:{
+      type: Number,
+      default: 1,
+    },
+    // 按大小压缩
+    compressAccurately:{
+      type: Number,
+      default: null,
+    },
+  },
+  methods: {
+    removeImage() {
+      this.$emit("remove",this.value);
+    },
+    handleUploadSuccess(res) {
+      this.$emit("success", res);
+      this.loading.close();
+    },
+    handleProgress(event, file, fileList){
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    endWith(str,endStr){
+      var d=str.length-endStr.length;
+      return (d>=0&&str.lastIndexOf(endStr)==d);
+    },
+    handleBeforeUpload(file) {
+      let that = this;
+      return new Promise((resolve, reject) => {
+        let sizeLimt = 0;
+        if(this.fileSizeLimit){
+          let size = parseInt(this.fileSizeLimit.substring(0,this.fileSizeLimit.length - 2));
+          if(typeof size === 'number' && !isNaN(size)){
+            if(that.endWith(this.fileSizeLimit,"MB")){
+              sizeLimt = size * 1024 * 1024;
+            }else if(that.endWith(this.fileSizeLimit,"KB")){
+              sizeLimt = size * 1024;
+            }
+          }          
+        }
+        if (sizeLimt > 0 && file.size > sizeLimt) {
+          that.$message.error("图片不能超过"+this.fileSizeLimit+",请重新上传！")
+          reject(file)
+        }
+        // 小于1表示需要压缩
+        if(that.compress < 1){
+          imageConversion.compress(file,that.compress).then(res=>{
+            resolve(res);
+          })
+        }else{
+          if(that.compressAccurately){
+            imageConversion.compressAccurately(file, that.compressAccurately).then(res => {
+              resolve(res)
+            })
+          }
+        }
+        resolve(file)
+      })      
+    },
+    handleUploadError() {
+      this.$message({
+        type: "error",
+        message: "上传失败",
+      });
+      this.loading.close();
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style scoped lang="scss">
+
+  .image-card .el-upload--picture-card,.image-card .el-upload-list--picture-card .el-upload-list__item{
+      background-color: #fbfdff;
+      border: 1px dashed #c0ccda;
+      border-radius: 6px;
+      box-sizing: border-box;
+      vertical-align: top;
+  }
+.el-upload--picture-card {
+    background-color: #fbfdff;
+    border: 1px dashed #c0ccda;
+    border-radius: 6px;
+    box-sizing: border-box;
+    vertical-align: top;
+}
+  .image-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  image-uploader .el-upload--picture-card{
+    width: 100%;
+  }
+  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;
+  }
+.image {
+  position: relative;
+  .mask {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: all 0.3s;
+  }
+  &:hover .mask {
+    opacity: 1;
+  }
+}
+</style>

src/components/ImageUpload/index.vue

@@ -15,6 +15,7 @@
       :show-file-list="false"
       :headers="headers"
       style="display: inline-block; vertical-align: top;">
+     
       <el-image v-if="!value" :src="value" :style="`width:${width};height:${height};`">
         <div slot="error" class="image-slot" :style="`line-height:${height};`">
           <i class="el-icon-plus" />