VUE项目中文件上传兼容IE9

项目使用vue编写，ui是elementui，但是element的upload组件是不兼容ie9的。因为ie9中无法使用formdata。

查找资料基本有两种解决方法：1.引入jquery和jquery.form。2.使用

1、jquery.form

　　插件提供ajaxsubmit和ajaxform两种表单提交方式，注意：不要对同一个表单同时使用两种方式。

　　ajaxsubmit是jquery表单插件核心函数。非常灵活，因为它依赖于事件机制，只要有事件触发就能使用ajaxsubmit()提交表单，eg：超链接、图片、按钮的click事件。

　　ajaxform是对$(“any”).ajaxsubmit(options)函数的一个封装，适用于表单提交的方式（注意，主体对象是<form>），会帮你管理表单的submit和提交元素（[type=submit],[type=image]）的click事件。在出发表单的submit事件时：阻止submit()事件的默认行为（同步提交的行为）并且调用$(this).ajaxsubmit(options)函数。

$('#myform').ajaxform(function() {     
   $('#output1').html("提交成功！");      
});    
         
$('#myform2').submit(function() {  
   $(this).ajaxsubmit(function() {     
      $('#output2').html("提交成功！");      
   });  
   return false; //阻止表单默认提交  
}); 

var options = {  
   target: '#output',          //把服务器返回的内容放入id为output的元素中      
   beforesubmit: validate,  //提交前的回调函数  
   success: showresponse,      //提交后的回调函数  
   //url: url,                 //默认是form的action， 如果申明，则会覆盖  
   //type: type,               //默认是form的method（get or post），如果申明，则会覆盖  
   //datatype: null,           //html(默认), xml, script, json...接受服务端返回的类型  
   //clearform: true,          //成功提交后，清除所有表单元素的值  
   //resetform: true,          //成功提交后，重置所有表单元素的值  
   timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求  
}  
function validate(formdata, jqform, options) { //在这里对表单进行验证，如果不符合规则，将返回false来阻止表单提交，直到符合规则为止  
   //方式一：利用formdata参数  
   for (var i=0; i < formdata.length; i++) {  
       if (!formdata[i].value) {  
            alert('用户名,地址和自我介绍都不能为空!');  
            return false;  
        }  
    }   
  
   //方式二：利用jqform对象  
   var form = jqform[0]; //把表单转化为dom对象  
      if (!form.name.value || !form.address.value) {  
            alert('用户名和地址不能为空，自我介绍可以为空！');  
            return false;  
      }   
}  
  
function showresponse(responsetext, statustext){  
   //datatype=xml  
   var name = $('name', responsexml).text();  
   var address = $('address', responsexml).text();  
   $("#xmlout").html(name + "  " + address);  
   //datatype=json  
   $("#jsonout").html(data.name + "  " + data.address);  
}; 

 

2、vue-upload-component

　　安装：

npm install vue-upload-component --save

　　使用：

　　设置this.$refs.upload.active = true，触发上传。

　　@input-filter是上传前的钩子函数，用于判断是否符合要求

　　@input-file是上传回调函数,每次上传的状态变化时 都会调用@input-file绑定的回调，形参是newfile, oldfile，通过新旧文件的对比来得到当前的状态

　　data:附加请求的参数

　　extensions:允许上传文件的后缀（"jpg,gif,png,webp"）

　　headers:自定义请求headers

<template>

<ul>
    <li v-for="file in files">
      <span>{{file.name}}</span>
      <button type="button" @click.prevent="remove(file)">移除</button>
    </li>
  </ul>

<file-upload 
　　ref="upload"
　　v-model="files" 
　　post-action="/"
　　@input-file="inputfile"
　　@input-filter="inputfilter"

>upload file</file-upload> </template>

<script>

import 'vue-upload-component/dist/vue-upload-component.part.css'

import fileupload from 'vue-upload-component'

export default {
  components: {
    fileupload,
  },
  data() {
    return {
      files: []
    }
  }, methods: {

 　　remove(file) {
      this.$refs.upload.remove(file)//会触发inputfile中删除条件
    }

    /**
     * has changed
     * @param  object|undefined   newfile   只读
     * @param  object|undefined   oldfile   只读
     * @return undefined
     */
    inputfile: function (newfile, oldfile) {

　　　　if (newfile && !oldfile) {
        // 添加文件
      }

      if (newfile && oldfile) {
        // 更新文件

        // 开始上传
        if (newfile.active !== oldfile.active) {
          console.log('start upload', newfile.active, newfile)

          // 限定最小字节
          if (newfile.size >= 0 && newfile.size < 100 * 1024) {
            newfile = this.$refs.upload.update(newfile, {error: 'size'})
          }
        }

        // 上传进度
        if (newfile.progress !== oldfile.progress) {
          console.log('progress', newfile.progress, newfile)
        }

        // 上传错误
        if (newfile.error !== oldfile.error) {
          console.log('error', newfile.error, newfile)
        }

        // 上传成功
        if (newfile.success !== oldfile.success) {
          console.log('success', newfile.success, newfile)
        }
      }

      if (!newfile && oldfile) {
        // 删除文件

        // 自动删除 服务器上的文件
        if (oldfile.success && oldfile.response.id) {
          // $.ajax({
          //   type: 'delete',
          //   url: '/file/delete?id=' + oldfile.response.id,
          // });
        }
      }

　　　　// 自动上传

     if (boolean(newfile) !== boolean(oldfile) || oldfile.error !== newfile.error) {

       if (!this.$refs.uploader.active) {

         this.$refs.uploader.active = true

       }

     }

    },
    /**
     * pretreatment
     * @param  object|undefined   newfile   读写
     * @param  object|undefined   oldfile   只读
     * @param  function           prevent   阻止回调
     * @return undefined
     */
    inputfilter: function (newfile, oldfile, prevent) {
      if (newfile && !oldfile) {
        // 过滤不是图片后缀的文件
        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newfile.name)) {
          return prevent()
        }
      }

      // 创建 blob 字段 用于图片预览
      newfile.blob = ''
      let url = window.url || window.webkiturl
      if (url && url.createobjecturl) {
        newfile.blob = url.createobjecturl(newfile.file)
      }

} }

}

</script>

注意：文件上传之后的返回值 content-type值不能是application/json 这会导致ie去解析返回结果，最终调用文件的保存或者打开，此处需要与后端协商将content-type改为text/plain