用axios实现上传图片和文件功能 , 首先html页面 :
<input type='text' v-moudel='username' />
<input type='file' id='file' />
<button @click='upload'>上传</button>
一个text输入框 , 一个文件输入框
js :
upload: function() {
var data = new FormData();
data.append('username', this.username);
data.append('img', document.getElementById('file').files[0]); //因为传入的文件可能有很多 , 一个一个传输
var config = { // 这个函数是表示进度的 , 在这里打印 percentCompleted ( 0-100 ) , 可以根据他的值做进度条
onUploadProgress: function(progressEvent) {
var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
console.log(percentCompleted);
}
};
axios.post('/upload/server', data, config) //提交 不能用get请求
.then(function (res) {
console.log(res);
})
.catch(function (err) { // catch 错误并打印
console.log(err);
});
}
}
第二种方法不是用ajax , 是用表单仿的 ajax , 缺点是没办法做进度条 , 是比较老的方法 , 但是写起来比较简单
<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>
