用vue及element-ui实现图片上传功能，替代dropify

需求（有点类似于头像上传功能）是这样的：
1.页面初始上传栏要有默认图片
2.点击默认图片选择文件夹上传或从本地拖拽图片至上传栏进行上传
3.上传栏图片替换成新的图片
3.延迟上传图片，与表单数据一起发送到后端
4.图片有且只能有一张

还在用jquery的小伙伴可以直接用dropify插件，可以轻松实现上述功能这里是dropify源码https://gitee.com/mirrors/Dropify

然后我自己这边尝试了了element-ui实现了一样的功能

<template>
  <div>
      <el-row :gutter="20">
        <el-col :span="24">
            <el-upload
              ref="upload"
              :accept="upload.headers.accept"
              :multiple="true"
              :headers="upload.headers"
              :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :on-error="handelFileError"
              :on-preview="handlePreview"
              :auto-upload="false"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :action="baseUrl+src+'?updateSupport='+upload.updateSupport"
              :data="upload.fileData"
              :file-list="upload.fileList"
              :show-file-list="false"
              drag
            >
                <el-image v-if="imageUrl" fit="fill" :src="imageUrl"></el-image>
                <el-image v-else  fit="fill" src="/assets/images/default-image-not-found.jpg"></el-image>
            </el-upload>
        </el-col>
        <el-col :span="24">
          <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
                <el-form-item label="描述" prop="materialMemo">
                  <el-input v-model="formData.imglMemo" placeholder="请输入内容"/>
                </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
  </div>
</template>

<script>
import { addInfo, updateInfo} from "@/api/info";
import {getToken} from "@/utils/auth";

export default {
  name: "addOrEdit",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 弹出层标题
      title: "",
      //图片上传路径
      src: '/material/info/image',
      baseUrl: process.env.VUE_APP_BASE_API,
      // 是否显示弹出层
      visible: false,
      //判断图片栏里是否有图片
      isFileForUpload: false,
      //判断是否上传图片成功
      isUploadSuccess: false,
      //上传后返回的图片名
      picName: undefined,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imageUrl:'',
      },

      // 表单参数
      formData: {
        imageSrc: null,
        imglMemo:null,
      },
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        //警告信息
        warningMsg: "",
        //可解释文件类型
        accept: "",
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        fileData:{materialId:""},
        fileList: [],
      },
      // 表单校验
      rules: {}
    };
  },
  created() {
  },
  methods: {
    // 取消按钮
    close() {
      this.visible = false;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.formData.id != null) {
            //无论是否上传成功，修改继续
            updateInfo(this.formData).then(response => {
              this.msgSuccess("修改成功");
              if (this.isFileForUpload) {
                this.submitFileForm();
              }
              this.close();
            });
          } else {
            //上传图片为异步，因此先新增再上传图片及保存图片路径
            addInfo(this.formData).then(response => {//新增物料信息
              this.msgSuccess("新增成功");
              if (this.isFileForUpload) {
                this.submitFileForm();
              }
              this.close();
            });
          }
        }
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.info(response)
      this.upload.isUploading = false;
      if (response.code === 200) {
        this.msgSuccess("图片上传成功！");
      } else {
        this.msgError(response.msg)
      }
    },
    handelFileError(response, file, fileList) {
      this.msgError(response.msg)
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //上传图片值改变 判读是否有值
    handleChange(file, fileList) {
      console.log(file.raw);
      this.imageUrl = URL.createObjectURL(file.raw);//变更展示图片
      if (typeof fileList != "undefined" && fileList.length > 0) {
        this.isFileForUpload = true;
        this.upload.fileList = fileList;
      } else {
        this.isFileForUpload = false;
      }
      if (fileList.length > 1) {//只允许有一张图片
        fileList.splice(0, 1);
      }
    },
    //值被清空
    handleRemove(file, fileList) {
      this.isFileForUpload = false;
    },
    handlePreview(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  }
};
</script>

<style>
.el-upload-dragger {
   /*background-color: #fff;*/
   /*border: 1px dashed #d9d9d9;*/
   /*border-radius: 6px;*/
   /*box-sizing: border-box;*/
   /*text-align: center;*/
   /*position: relative;*/
   /*overflow: hidden;*/
 width: 100%;//上传框的样式，原始默认的写死了大小，可以依据需求修改
height: 100%;
}
</style>