用axios實(shí)現(xiàn)上傳圖片和文件功能 , 首先html頁(yè)面 :
<input type='text' v-moudel='username' />
<input type='file' id='file' />
<button @click='upload'>上傳</button>
一個(gè)text輸入框 , 一個(gè)文件輸入框
js :?
upload: function() {
? ? ? var data = new FormData();
? ? ? data.append('username', this.username);
? ? ? data.append('img', document.getElementById('file').files[0]);? ? ? ? //因?yàn)閭魅氲奈募赡苡泻芏?, 一個(gè)一個(gè)傳輸
? ? ? var config = {? ? ? ? // 這個(gè)函數(shù)是表示進(jìn)度的 ,??在這里打印 percentCompleted ( 0-100 ) , 可以根據(jù)他的值做進(jìn)度條
? ? ? ? onUploadProgress: function(progressEvent) {?
? ? ? ? ? var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
? ? ? ? ? console.log(percentCompleted);
? ? ? ? }??
? ? ? };
? ? ? axios.post('/upload/server', data, config)? ? ? ? //提交 不能用get請(qǐng)求
? ? ? ? .then(function (res) {
? ? ? ? ? console.log(res);
? ? ? ? })
? ? ? ? .catch(function (err) {? ? ? ? // catch 錯(cuò)誤并打印
? ? ? ? ? console.log(err);
? ? ? ? });
? ? }
? }
第二種方法不是用ajax , 是用表單仿的 ajax , 缺點(diǎn)是沒(méi)辦法做進(jìn)度條 , 是比較老的方法 , 但是寫起來(lái)比較簡(jiǎn)單
<form target=' fakeajax ' method=' post ' enctype=' multipart/form-data ' action=" http://localhost:3000/upload/server " >
? ? <input type = "text" name = "username" />
????<input type = 'file' name = "username" />
? ? <button type=' submit '>上傳</button>
????<iframe id=' fakeajax ' name = " fakeajax " style = " display:none " ></iframe>
</form>
