1、用js的formData對象上傳（服務(wù)器返回url地址）

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> methods: {update(e){let file = e.target.files[0];let param = new FormData(); //創(chuàng)建form對象param.append('file',file);//通過append向form對象添加數(shù)據(jù)console.log(param.get('file')); //FormData私有類對象，訪問不到，可以通過get判斷值是否傳進(jìn)去let config = {headers:{'Content-Type':'multipart/form-data'} //這里是重點(diǎn)，需要和后臺溝通好請求頭，Content-Type不一定是這個值}; //添加請求頭axios.post('http://127.0.0.1:8081/upload',param,config).then(response=>{console.log(response.data);})}}

2、Form表單上傳（服務(wù)器返回url地址）

<form><input type="text" value="" v-model="name" placeholder="請輸入用戶名"><input type="text" value="" v-model="age" placeholder="請輸入年齡"><input type="file" @change="getFile($event)"><button @click="submitForm($event)">提交</button> </form> data: {name: '',age: '',file: ''},methods: {getFile(event) {this.file = event.target.files[0];console.log(this.file);},submitForm(event) {event.preventDefault();let formData = new FormData();formData.append('name', this.name);formData.append('age', this.age);formData.append('file', this.file);let config = {headers: {'Content-Type': 'multipart/form-data'}}axios.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) {if (response.status === 200) {console.log(response.data);}})}}

注意：表單form加上屬性enctype="multipart/form-data"。客服端發(fā)送的頭部就是：

Content-type: multipart/form-data, boundary=AaB03x--AaB03x//后面這個是瀏覽器假的隨機(jī)值

提交成功客服端還能看到以下圖片相關(guān)內(nèi)容：

3、獲取相機(jī)圖片的base64

/*** 獲取用戶拍照的圖片信息*/async Photograph() {// 獲取用戶拍照的圖片名字，顯示到頁面上this.fileName = this.$refs.photoref.files[0].name;// 獲取圖片base64 代碼，并存放到 base64ImgData 中this.base64ImgData = await this.FileReader(this.$refs.photoref.files[0]);},/*** 返回用戶拍照圖片的base64*/FileReader(FileInfo) {// FileReader 方法參考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReaderlet reader = new FileReader();// readAsDataURL 方法參考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURLreader.readAsDataURL(FileInfo);// 監(jiān)聽讀取操作結(jié)束/* eslint-disable */return new Promise(resolve => (reader.onloadend = () => resolve(reader.result)));}

總結(jié)

以上是生活随笔為你收集整理的vue+axios上传文件的几种方式及步骤（以上传图片为例）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。