Vue兼容IE文件上传

使用jQuery中的ajaxSubmit方法

页面结构如下:

<el-link type="primary">
    <label for="recordExcel">xxxx&ensp;|</label>
</el-link>
<form id="recordExcelForm" style="display:none">
    <input type="file" id="recordExcel" name="recordExcel" @change="fileChange" />
</form>

 上传函数如下:

fileChange() {
      let Filedata = $("#recordExcel").val();
      if (!Filedata) {
        return;
      }
      // console.log(Filedata,$("#recordExcel")[0].files[0])
      if (!/\.(xlsx)$/.test(Filedata)) {
        this.$message({
          message: "仅支持上传xlsx格式文件",
          type: "warning"
        });
        return;
      }
      try {
        let file = $("#salaryExcel")[0].files[0];
        let fileSize = (file.size / 1024).toFixed(0);
      } catch (e) {
        this.$message({
            message:
            "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过5M,建议使用FireFox、Chrome或IE10以上浏览器。",
                type: "warning"
             });
        }
            // 文件大小和限制类型可以通过子组件传值区分,若不适应于使用页面,可自行判断
            if (this.upLoadFile.length == 5) {
                this.$message({
                    message: "最多上传5个附件",
                    type: "warning"
                });
                $("#salaryExcel").val("");
                return;
            }
            if (fileSize / 1 > 1024 * 2) {
                this.$message({
                    // message: "最多能上传2M以内的图片",
                    message: "要求格式为JPG、PNG格式,图片大小不超过2M",
                    type: "warning"
                });
                return;
            }
            if (!/\.(png|jpg|jpeg|PNG|JPG|JPEG)$/.test(Filedata)) {
                this.$message({
                    // message: "仅支持上传png、jpg、jpeg格式文件",
                    message: "要求格式为JPG、PNG格式,图片大小不超过2M",
                    type: "warning"
                });
                return;
            }
      let _this = this;
      var options = {
        url:
          common.uploadUrl +
          "api-e/cs/insdetail/expand/importEmployeeInsRecord",
        type: "POST",
        dataType: "json",
        data: {
          projectId: this.projectId
        },
        headers: {
          Authorization: "Bearer " + localStorage.getItem("access_token")
        },
        success: function(data) {
          // console.log("result", data);
        },
        // clearForm: true,    // 成功提交后,清除表单填写内容
        resetForm: true, // 成功提交后,重置表单填写内容
        error: function() {
          console.log("error");
        }
      };     

 

posted @ 2020-07-17 15:10  盼星星盼太阳  阅读(467)  评论(0)    收藏  举报