el-upload以及FormData 对象上传照片

当我们需要上传照片到服务器上时，我们需要将照片转换成文件流的形式。（FormData对象无法直接查看内部属性，需要使用get方法查看）

代码片段

--------------------------------------------HTML--------------------------------------------

<el-upload
         class="upload-demo"
         ref="upload"
         action=""                     //必要属性，手动上传可设置为空
         :on-preview="handlePreview"
         :on-remove="handleRemove"
         :on-change="handleChange"    //监听上传文件
         :auto-upload="false"         //禁用自动上传
         :show-file-list="false"      //隐藏上传文件列表
         :disabled="true"           //禁用自带上传方法
>
</el-upload>                        

---------------------------------------------JS--------------------------------------------------

 //上传文件变化监听
handleChange(file, fileList){
            console.log(file,fileList)
            this.upFile = file.raw
},
//上传
submitUpload(){
            let self = this
            var url = api
　　　　　　　//创建FormData对象，调用append方法添加参数
            var fd = new FormData();  
            fd.append("type", 1);       //附件类型
            fd.append("upfile", this.upFile);    //文件流
            fd.append("id",this.uuid);     //随机编码
            fd.append("name", "现场照片");  //附件名称
            fd.append("username", window.username);   //登陆名

             $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: fd,
                processData: false,        //数据不需要处理，设置为false
                contentType: false,        //数据类型为FormData,取消默认设置
                success: function(res) {
                    if (res < 0){
                        return self.$message({
                            type: 'success',
                            message: '附件添加失败，请重新添加！',
                            showClose: true,
                            duration: 2000
                        });
                    }else{
                        self.$message({
                            type: 'success',
                            message: '附件添加成功！',
                            showClose: true,
                            duration: 2000
                        });
                        
                        self.getImg()      //添加成功后，可以获取图片路径以便显示
                    }
                }
            })
}

 遇到的问题：

　　　　　　1.点击选择文件会出现两次弹框

　　　　　　　　el-upload自带上传方法，这里使用的手动上传，需使用disabled禁用自带的方法

　　　　　　2.使用ajax时，参数的格式不是json，修改默认值

　　　　　　　　contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。

　　　　　　　　processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-

　　　　　　　　　　　　　　　urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

　　　　　　　　（另注： 使用axios上传，修改请求头Content-Type为multipart/form-data）