在前端頁面中如果有檔案或者圖片需要上傳的場景下，通用做法是使用formdata將檔案從前端傳輸到後臺，在後臺上傳檔案並將url儲存在資料庫。
當前專案是使用vue + Element UI + django 的框架，需要將檔案從vue傳遞到django中，上傳阿里雲OSS儲存。記錄使用方法

formdata的簡單使用

建立

新建一個formdata的變數

var data = new FormData() 

    data.append('name', this.createForm.name)
    data.append('desc', this.createForm.desc)
    data.append('page_url', this.createForm.page_url)
    data.append('edit', this.createForm.edit)
    data.append('page_id', this.createForm.page_id)
 

新增資料

通過append(key, value)來新增資料，這裡分為兩種情況，
一、key值無重複
key值不存在重複的情況下，一個key對應一個value

data.append('name', this.createForm.name)
data.append('desc', this.createForm.desc)

二、key值重複
key值在某些時候會重複，如上傳多個檔案時，這時一個key對應一個數組，陣列中為多個value

data.append('file', file.raw)
data.append('file', file.raw)

獲取資料

key值對應一個value，可以通過get

data.get(key)

key值對應多個value，可以通過getAll方法取值

data.getAll(key)

如果key對應多個value而使用get取值，只能取到value的最後一個值

判斷資料是否存在

我們可以通過has(key)來判斷是否對應的key值

data.has('name')

刪除資料

通過delete(key)，來刪除資料

data.delete('name')

遍歷資料

我們可以通過entries()來獲取一個迭代器，然後遍歷所有的資料，

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");
 
var i = formData.entries();
 
i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}
 

專案中使用

要完成的功能如下，在一個彈出框中能夠輸入資訊，重點是能夠新增多個檔案。

在Element UI中已經處理好，當選擇多個檔案之後，會儲存到一個數組中，我只需要對這個陣列操作即可。

vue程式碼

建立formdata

var data = new FormData();
// 普通變數
data.append('name', this.createForm.name)
data.append('desc', this.createForm.desc)
data.append('page_url', this.createForm.page_url)
data.append('edit', this.createForm.edit)
data.append('page_id', this.createForm.page_id)

// 檔案。因為涉及到編輯功能，所以對於新上傳的檔案儲存其`file.raw`，編輯的檔案儲存檔案id
this.createForm.file.forEach((file) => {
  if (file.raw) {
    data.append('new_files', file.raw)
  }else{
    data.append('old_files', file.page_file_id)
  }
})
pageCreate(data).then((res) => {
........
}
}

傳送請求

export function pageCreate(form) {
    return postForm(URL.createUrl, form)
}

post請求的內容格式。post請求不是普通的json而是form-data

export function postForm (url, data= {}) {
  return new Promise((resolve, reject) => {
    axios.create({
      withCredentials: true,
      headers: {'X-CSRFToken': getCookie('csrftoken'), 'Content-Type':  "multipart/form-data"},
    }).post(url, data).then(response => {
      resolve(response.data)
    }, err => {
      reject(err)
    })
  })
}

後端處理

django的接收：

# 接收到formdata的出文件之外的資料
data = request.POST

# 接收檔案，getlist是接收多個檔案
# formdata在vue中同一個key傳入了多個value，value成為了一個數組，所以需要使用getlist來獲取所有檔案
new_files = request.FILES.getlist('new_files')


# formdata在vue中同一個key只有一個檔案型別的value，可以使用get來獲取檔案
new_files = request.FILES.get('file')

後續將檔案上傳到阿里雲的物件儲存，將檔案的url儲存到資料庫。展示或編輯檔案時，只需要傳入檔案的url，element UI即可解析出檔案。