使用formdata在vue和django之間傳遞文件

在前端頁面中如果有文件或者圖片需要上傳的場景下，通用做法是使用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即可解析出文件。