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）