VUE上传图片组件遇到的问题

1、向服务器传送的参数放在input的name里

2、change事件只触发一次

该问题并不是由于change事件失效造成的，是因为uploadByIframe事件中，会把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了。

重新绑定change事件就可以解决：

$("#" + fileId).change(function() {
    self.uploadByIframe(self.opt);
})

或者增加事件绑定事件监听change事件：

使用jQuery自带的 delegat 方法 --> jQuery 事件 - delegate() 方法

mounted() {
    const self = this;
    if(this.judgeIE9) {
        $("body").delegate(".uploadImg-parent #upFile","change",function() {
            self.uploadByIframe(self.opt);
        })
    }
},

参考链接: 上传文件或图片 type=file change事件只触发一次

3、在IE9下input事件需要双击才能打开上传图片

可以使用一个label标签，labe的for属性指向file文本框。

<label for="upFile">{{uploadText}}</label>
<form id="upFileForm">
    <input name="file" @change='addImg' id="upFile" type="file" accept=".jpg,.png">
</form>

每次上传时，点击label标签，就可以直接触发file控件。

设置CSS时，设置input的样式:

input {
    opacity: 0;
    filter:alpha(opacity=0);
    z-index:1;
    display: none;
    ... ...
}

设置label标签覆盖input标签即可。

4、chrome等浏览器出现不能连续上传同样图片

每次上传之后，重置form，解决不能连续上传两张相同图片的问题。

$('#upFileForm')[0].reset();

5、IE9下上传图片不成功时首先检测代码中是否有console对象，console对象在IE9中会阻塞程序的执行！！！

附使用iframe上传图片代码：

mounted() {
      const self = this;
      if(this.judgeIE9) {
          $("body").delegate(".uploadImg-parent #upFile","change",function() {
              //alert("test");
              self.uploadByIframe(self.opt);
          })
      }
},
methods: {
      uploadByIframe(opt) {  
            const self = this;
            var _opt = {
                url:"",
                dataType:"json",
                fileInputId: "",
                extraData: null
            }
            $.extend(true, _opt, opt);

            var fileId = _opt.fileInputId,
                extraData = _opt.extraData;

            const imgName = document.getElementById(fileId).value;

            var ifraFlag = "iframeForUpload" + new Date().getTime();
            // var ifra = $('<iframe name="' + ifraFlag + '" id="' + ifraFlag + '" style="display: none"></iframe>');
            var ifra = $('<iframe name="' + ifraFlag + '" id="' + ifraFlag + '" style="display: none"></iframe>');
            $("body").append(ifra);

            var fileInputParent = $("#" + fileId).parent();
            var form = $('<form style="display:none"></form>');
            form.attr({
                method: "post",
                enctype: "multipart/form-data",
                action: _opt.url,
                target: ifraFlag
            });
            form.append($("#" + fileId));
            
            $("body").append(form); //ie必须得渲染在页面了才能submit chrome不需要这一步的
            
            form.submit();
            var returnFileInput=form.find("#" + fileId).clone();//复制一份新的 还回去
            fileInputParent.append(returnFileInput); //append走了 上传之后还得还回去
            // 手动添加onchange事件，解决onchange触发一次就失效的问题
            form.remove();
            // $("#" + fileId).change(function() {
            //     console.log('change');
            //     self.uploadByIframe(self.opt);
            // })
            
            $("#" + ifraFlag).load(function() {
                var iframeContents = this.contentWindow.document.body.innerHTML,resData;
                switch(_opt.dataType){
                    case "text":
                        resData = iframeContents;
                        break;
                    case "json":
                        try{
                            resData = JSON.parse(iframeContents);
                        }catch(err){
                            resData = null;
                        }
                        break;              
                }
                if(iframeContents.search("\"status\":200") >0 &&iframeContents.search("key") > 0) {
                    // 请求成功后执行的操作
                } 
                $(this).remove();
            })
        },
}