vue項目中使用axios上傳圖片等文件操作

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

import axios from 'axios'
// 添加請求頭
update (e) { // 上傳照片
 var self = this
 let file = e.target.files[0]
 /* eslint-disable no-undef */
 let param = new FormData() // 創(chuàng)建form對象
 param.append('file', file, file.name) // 通過append向form對象添加數(shù)據(jù)
 param.append('chunk', '0') // 添加form表單中其他數(shù)據(jù)
 console.log(param.get('file')) // FormData私有類對象，訪問不到，可以通過get判斷值是否傳進(jìn)去
 let config = {
 headers: {'Content-Type': 'multipart/form-data'}
 }
 // 添加請求頭
 axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
 .then(response => {
 if (response.data.code === 0) {
 self.ImgUrl = response.data.data
 }
 console.log(response.data)
 })
 }