其實這個問題一直困擾了我很久，因為上傳圖片功能一直是把我搞的雲里霧里的，而這次我終於是徹底的把它搞明白了！！！現在把自己的思路整理出來分享一下。
- 首先完成這個需求我用到了element
- 用到了axios
先講一下上傳的流程好了。
一般的上傳圖片流程是這樣的：
- 先將文件通過file的類型發送過去，這個文件會包含uid、name等等
- 后台成功收到后，將圖片存到ftp，回調會返回一個url，這個url就是圖片引用的src地址了，可以直接訪問啦。
下面是代碼部分
- 首先element找到上傳圖片的組件。
<el-upload action="233" :auto-upload="false" :http-request="postPhoto" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="1" :on-change="fail">
<i class="el-icon-plus"></i>
</el-upload>
<span>只支持jpg與png格式文件上傳</span>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt>
</el-dialog>
解釋一下上面的部分
- 默認的這個上傳組件是自動上傳的，但是我們的需求不需要那樣---:auto-upload="false"，所以我設為了fasle。
- action是必選項，配置上傳的路徑接口，其實如果關閉了自動上傳，這個地址也用不到了，但是要隨便寫點東西。
- 其他的我就不一一介紹了，文檔里很詳細。這里重點的是:on-change="fail"，會監聽變化，只要圖片傳進來了，這里的fail就會有參數傳過去了。當然啦，使用ref去綁定也是可以的，只不過人家element既然有這個方法了，我們就用咯。
下面是js
這里就是上面綁定的change事件了
fail (file) {
this.dialogImageUrl = file.url;
this.dialogImageUrl = new window.File([this.dialogImageUrl], file.name, {
type: file.type
});
上面負責回顯，調用的本地
// this.dialogVisible = true;
這里我在data中初始化了一個變量，imgPost，給他賦值。
this.imgPost = file.raw
},
- file就長這個樣子，raw是我們需要的。
這里則是你自己綁定的上傳按鈕了，
getdat () {
let token1 = sessionStorage.getItem("token");
由於我們的后台需要發送token，所以這里存了一下
首先，創建一個新的FormData。
let formData1 = new FormData();
formData1.append("file", this.imgPost)
formData1.append("token", token1)
// 划重點！！這里需要特別說明，你會發現發現打印這個formData1為空。
這里的append並不是沒有追加進去，是因為控制台打印的formdata是原型，為類的私有字段，外界訪問不到，可以在發送的請求中查看
// 這就是要傳的文件
console.log(formData1)
upload是我的封裝的接口=====換成你自己的即可
upload(formData1).then(res => {
如果一切順利，那么這里的res應該就有你們后台給的回調url啦。
}