html 页面引入 vue 组件之 http-vue-loader.js

一、http-vue-loader.js

           http-vue-loader.js 是一个 Vue 单文件组件加载器，可以让我们在传统的 HTML 页面中使用 Vue 单文件组件，而不必依赖 Node.js 等其他构建工具。它内置了 Vue.js 和样式加载器，并能自动解析 Vue 单文件组件中的所有内容，并将其转化为 JavaScript 代码。

ps ：注意：httpVueLoader 加载的单文件导出方式不同：module.exports = {}，而不是 export default {}

二、示例

这里对了 elementUI 的上传组件做一个封装，使其能可根据业务来配置上传的附件

2.1. vue 组件

<template>
  <div>
    <el-col :span="24" v-for="(template,index) in uploadsTemplates">
      <el-card style="margin-top: 20px;">
        <div slot="header" class="clearfix">
          <el-row style="display: flex;align-items: center;">
            <el-col :span="20"><span style="font-size: 16px;">{{template.title}}</span></el-col>
            <el-col :span="4" style="text-align: right;">
              <el-tag v-if="template.required == 'N'" type="info">非必上传</el-tag>
              <el-tag v-if="template.required == 'Y'" type="danger">必须上传</el-tag>
            </el-col>
          </el-row>
        </div>
        <p style="color: #F56C6C;margin-bottom: 5px;">
          {{template.description}}
        </p>
        <el-col :span="12" style="padding: 20px 0 ">
          <el-form-item prop="requiredFile"
                        ref="uploadFormItems"
                        :rules="template.success||template.required=='N'?[]:[{required: true, message: '请上传必要件', trigger: 'blur'}]">
            <el-row>
              <el-upload :auto-upload="true"
                         drag
                         :file-list="template.fileList"
                         ref="uploadComponents"
                         name="attachment"
                         :on-preview="(file)=>onPreview(file,template)"
                         :before-upload="(file)=>onBeforeUpload(file,template)"
                         :on-success="(response,file,fileList)=>onUploadSuccess(response,file,fileList,index)"
                         :on-remove="(file,fileList)=>onRemoveFile(file,fileList,index,template)"
                         :action="uploadsUrl"
                         :data="{ywlx:ywlx,applyNo:applyNo,configId:template.configId}"
                         multiple>
                <i class="el-icon-upload"></i>
                <div>将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">{{msg}}</div>
              </el-upload>
            </el-row>
          </el-form-item>
        </el-col>

      </el-card>
    </el-col>
    <div class="demo-image__preview" style="display: none">
      <el-image
                style="width: 100px; height: 100px"
                ref="imagePreview"
                :src="previewSrc"
                :preview-src-list="previewSrcList">
      </el-image>
    </div>
  </div>
</template>

<script>
module.exports = {
  name: "upload-template",
  props: ['contextPath', 'applyNo', 'ywlx', 'fromedit','msg','beforeUpload'],
  data() {
    return {
      uploadsUrl: this.contextPath + "/system/sysUploadFile/uploadAttachment",
      //预览图片弹窗
      imgDialogVisible: false,
      //预览图片路径
      previewSrc: '',
      //预览图片集合
      previewSrcList: [],
      // 要件（只是校验用）
      requiredFile: [],
      //上传模板
      uploadsTemplates: [],
      //上传前钩子
      onBeforeUpload: this.beforeUpload
    }
  },
  mounted: function () {
    if(this.onBeforeUpload == null){
      this.onBeforeUpload = (file,upload)=>{
        return true;
      }
    }else{
      if (typeof this.onBeforeUpload === 'function') {

      } else {
        throw new Error('beforeUpload is not a function');
      }
    }
    // 读取附件模板
    $.ajax({
      type: "get",
      async: false,
      url: this.contextPath + '/system/sysUploadConfig/getUploadsTemplates',
      data: {ywlx: this.ywlx},
      dataType: "json"
    }).then((response) => {
      if (response.code == 0) {
        response.data.forEach(template => {
          template.success = false;
          template.fileList = [];
        });
        this.uploadsTemplates.push(...response.data);
        if (this.fromedit) {
          $.ajax({
            type: "post",
            async: false,
            url: this.contextPath + "/system/sysUploadFile/getFilesByApplyNo",
            dataType: "json",
            data: {ywlx:this.ywlx,applyNo: this.applyNo}
          }).then((response) => {
            if (response.code == 0) {
              response.data.forEach(attachemnt => {
                this.uploadsTemplates.forEach(template => {
                  if (attachemnt.configId === template.configId) {
                    template.fileList.push(attachemnt);
                    template.success = true;
                  }
                })
              });
            } else {
              this.$message({
                showClose: true,
                message: response.msg,
                type: 'error',
                offset: 200,
                duration: 10000
              });
              console.log("error:");
              console.log(response);
            }
          });
        }
      } else {
        this.$message({
          showClose: true,
          message: response.msg,
          type: 'error',
          offset: 200,
          duration: 10000
        });
        console.log("error:");
        console.log(response);
      }
    });

  },
  methods: {
    //预览图片
    onPreview: function (file, template) {
      this.previewSrc = this.contextPath+(file.url?file.url:file.response.data.url);
      template.fileList.forEach((file)=>{
        this.previewSrcList.push(this.contextPath+(file.url?file.url:file.response.data.url));
      });
      console.log(this.previewSrc)
      console.log(this.previewSrcList)
      this.$refs.imagePreview.clickHandler();
    },

    //文件上传成功的回调
    onUploadSuccess: function (response, file, fileList, index) {
      console.log('上传成功需要操作请增加事件：upload-success')
      if (response.code == 0) {
        // 把要件列表中的当前这个要件的success置为true
        this.uploadsTemplates[index].success = true;
        this.uploadsTemplates[index].fileList = fileList;
      }else {
        this.$message({
          showClose: true,
          message: response.msg,
          type: 'error',
          offset: 200,
          duration: 2000
        });
        //删除控件里某个文件
        fileList.splice(fileList.indexOf(file),1);
      }
      this.$emit('upload-success',response)

      //清除控件里所有文件
      // this.$refs.uploadComponents[index].clearFiles();
    },
    //移除某个文件
    onRemoveFile: function (file, fileList, index, upload) {
      //调用远程移除附件，传递file.fileId
      $.ajax({
        url: this.contextPath + '/system/sysUploadFile/removeAttachment',
        method: 'post',
        async: false,
        data: {fileId: file.fileId?file.fileId:file.response.data.fileId}
      }).then((response) => {
        if (response.code == 0) {
          this.uploadsTemplates[index].fileList = fileList;
          // 如果已经全部移除，加上校验
          if(fileList.length===0){
            this.uploadsTemplates[index].success = false;
          }
        } else {
          console.log("error message:");
          console.log(response.data);
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error',
            offset: 200,
            duration: 2000
          });
        }

      });
    },


  },
}
</script>

<style scoped>
  .el-upload__input{
    display: none;
  }
</style>

2.2. html 页面

页面中添加 http-vue-loader.js 后添加组件两种方式
方式一：

// 使用httpVueLoader
Vue.use(httpVueLoader);
var vm = new Vue({
	el: "#upload-test-form",
	components: {
	    // 将组建加入组建库
	    'upload-template': 'url:'+ctx+'components/upload-template.vue',
	},
	data: {
	    ctx:ctx,
	    fromEdit:true,
	    applyForm: {
	        ywlx:"ywlx1",
	        applyNo:"123456789",
	    },
	},
});

方式二：

var vm = new Vue({
    el: "#upload-test-form",
     components: {
         // 将组建加入组建库
         'upload-template': httpVueLoader(ctx+'components/upload-template.vue'),
     },
     data: {
         ctx:ctx,
         applyForm: {
             ywlx:"ywlx1",
             applyNo:"123456789",
         },
     },
 });

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增上传文件信息')" />
    <th:block th:include="include :: element-ui('新增上传文件信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="upload-test-form">
        <div class="row">
            <el-form  ref="uploadForm" id="uploadForm" :model="applyForm">
                <upload-template :apply-no="applyForm.applyNo"
                                 :context-path="ctx"
                                 :before-upload="beforeUpload"
                                 @upload-success="uploadSuccess"
                                 ywlx="ywlx1"></upload-template>
            </el-form>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: element-ui-js" />
    <script th:src="@{/lib/http-vue-loader.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "system/sysUploadFile";
        var vm = new Vue({
            el: "#upload-test-form",
            components: {
                // 将组建加入组建库
                'upload-template': httpVueLoader(ctx+'components/upload-template.vue'),
            },
            data: {
                ctx:ctx,
                applyForm: {
                    ywlx:"ywlx1",
                    applyNo:"123456789",
                },
            },

            methods: {
                beforeUpload: function(file,template){
                    console.log("上传前操作")
                    console.log(file)
                    console.log(template)
                    //返回 true，继续上传，返回false，终止上传
                    return false;
                },
                uploadSuccess: function(file){
                    console.log("上传成功操作")
                    console.log(file)
                }
            }
        });

        function submitHandler() {
            vm.$refs.uploadForm.validate((valid) => {
                if (valid) {
                    alert('文件验证通过!');
                } else {
                    alert('文件验证失败!');
                }
            });
        }
    </script>
</body>
</html>

3.3. 效果

业务类型上传文件配置

业务上传附件页面

保存的文件

总结：
通过 http-vue-loader.js，我们可以在普通的 HTML 页面中使用 Vue 单文件组件来实现前端开发的快速迭代。在使用 http-vue-loader.js 时，我们需要引入 Vue.js 和 http-vue-loader.js，并使用 httpVueLoader () 方法加载 Vue 单文件组件，并将其实例化为 Vue 对象。