vue+elementUI项目实现表单和图片一起上传记录

踩坑记录：vue-cli 3 跑项目时卡在after emitting CopyPlugin 卡在98%。
原因：require() 图片里面为空！！！后来者注意这一点

上干货：主要实现新增一条目录

html

 <!-- 新增模板弹窗控制 -->
              <el-button type="success" @click="visible = true"
                >添加模板</el-button 
<!-- 新增模板弹窗 -->
    <el-dialog :visible.sync="visible" title="新增模板">
      <!-- 新增模板内容代码 -->
      <el-form ref="form" :model="form" label-width="auto" id='fromAdd'>
        <el-form-item label="内容类型：">
          <el-select
            v-model="form.content"
            placeholder="请选择内容类型"
          >
            <el-option label="图片" value="img"></el-option>
            <el-option label="视频" value="void"></el-option>
            <el-option label="互动视频" value="interaction"></el-option>
            <el-option label="跟读" value="followup"></el-option>
            <el-option label="习题" value="exercises"></el-option>
            <el-option label="游戏" value="game"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板类型：">
          <el-select
            v-model="form.modelType"
            placeholder="请选择模板类型"
          >
            <el-option label="单选" value="single"></el-option>
            <el-option label="多选" value="multiple"></el-option>
            <el-option label="连线" value="connection"></el-option>
            <el-option label="拖拽" value="drag"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板名称：">
          <el-input
            v-model="form.modelName"
            placeholder="请输入模板名称"
          >
          </el-input>
        </el-form-item>
        <!-- 上传图片代码开始 -->
        <el-form-item label="上传图片：" ref="uploadElement" prop="imgSrc">
          <el-input v-model="form.imgSrc" v-if="false"></el-input>
          <el-upload
            class="avatar-uploader"
            ref="upload"
            :show-file-list="false"
            action="/index/upload"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :auto-upload="false"
            :data="form"
          >
            <img
              v-if="form.imgSrc"
              :src="form.imgSrc"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 上传图片代码结束，后续改进 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
          <el-button @click="resetForm('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增模板弹窗代码结束 -->

js

export default {
  name: "",
  //data用于定义数据，进行数据初始化
  data() {
    let i = 0;
    //定义数据
    //定义表格初始数据
    const item = {
      date: ++i,
      name: "习题",
      address: "单选",
      addname: "点击单选",
      coverimg: require("../../public/img/black.jpg"),
      operation: "",
    };
    //对于表格数据进行重新赋值
    item.date = ++i;
    //输出数据
    return {
      AsideHeight: window.screen.height,
      imgArray: [
        {
          imgHttp: require("../../public/img/black.jpg"),
        },
        {
          imgHttp: require("../../public/img/girl.png"),
        },
      ],
      //    tableData: Array(20).fill(item),
      //表格数据渲染，后续换成接口数据，现在为模拟数据
      tableData: [
        {
          name: "习题",
          address: "单选",
          addname: "点击单选",
          coverimg: require("../../public/img/black.jpg"),
        },
        {
          name: "习题",
          address: "单选",
          addname: "点击单选",
          coverimg: "",
        },
      ],
      //弹窗控制，进行各个弹窗的展示
      visible: false,
      //表单结构，用于控制弹窗表单数据
      form: {
        content:"",//内容类型
        imgSrc: "",//图片
        modelType:"",//模板类型
        modelName:"",//模板名称
      },
    };
  },
  methods: {
    //更新表格数据
    updataTb: function (e) {
      console.log(e);
    },
    //添加表格数据
    addTb: function () {},
    //删除表格数据
    deleteTb: function () {},

    // 表单保存按钮代码实现,后续实现用ajax实现数据提交
    submitForm(formName) {
      console.log(this.form);
      let vm = this;
      //上传数据前进行表单验证，
      this.$refs[formName].validate((valid) => {
        if (valid) {
          vm.$refs.upload.submit();
        } else {
          return false;
        }
      });
    },
    //点击取消按钮执行，清空未提交数据，不对端上传值，关闭弹窗
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.content="";
      this.form.imgSrc="";
      this.form.modelType="";
      this.form.modelName="";
      this.visible=false;
    },
    //文件状态改变执行，实现表单提交前图片预览功能
    handleChange(file, fileList) {
      console.log(fileList);
      this.form.imgSrc = URL.createObjectURL(file.raw);
    },
    //文件上传前执行，把值变为true，当值为false时停止上传
    beforeUpload(file) {
      console.log(file);
      return true;
    },
  },
};