在面试的时候遇到了个问题就是前端怎么做文件上传
一、原生Ajax文件+FormData上传
在了解这个方法前说几个知识点：
1.FormData:FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
2.FormData.append() 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。
formData.append(name, value, filename);第三个参数可选。
<div>
<input type="file" id="pic">
<div>
<script>
var files = document.getElementById('pic').files;
//files是文件选择框选择的文件对象数组
if(files.length == 0) return;
var form = new FormData(),
url = 'http://.......', //服务器上传地址
file = files[0];
form.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
//上传进度事件
xhr.upload.addEventListener("progress", function(result) {
if (result.lengthComputable) {
//上传进度
var percent = (result.loaded / result.total * 100).toFixed(2);
}
}, false);
xhr.addEventListener("readystatechange", function() {
var result = xhr;
if (result.status != 200) { //error
console.log('上传失败', result.status, result.statusText, result.response);
}
else if (result.readyState == 4) { //finished
console.log('上传成功', result);
}
});
xhr.send(form); //开始上传
</script>
vue方法
<div>
<input type="file" accept="image/*" ref='input' class="input" >
<button @click="publish">上传</button>
</div>
<script>
export default{
methods:{
publish(){
let ip = this.$refs.input;
let formdata = new FormData()
formdata.append("file", ip.files[0]);
//上传的照片如果想要在页面中显示
//html中创建一个img标签 ref设置为img
//let img = this.$refs.img
//const reader = new FileReader()
//reader.readAsDataURL(ip.files[0])
//reader.οnlοad=function(e){
img.src=e.target.result
}
this.$axios
.post("/kmd-web/adm/updateAd", formdata, {
headers: { "Content-Type": "multipart/form-data" }
})
.then(res => {
if (res.data.statusCode == 200) {
alert("修改成功！");
history.go(-1);
} else {
alert("修改失败！");
}
});
}
}
}
