vue上传多张图片
2020-05-26 本文已影响0人
小北呀_
需要注意的地方:
1.多张图片的话就如下循环就可以。
2.formData.append('company','XXXXX');是另外的参数,'company'是和后台商量好的字段。
3.multiple是可选择多个文件,single是可选择单个文件
4.accept='image/*' 只能上传图片
<template>
<div>
上传图片:
<!-- 每次只上传一张照片,且展示在页面上。 -->
<input type="file" multiple="multiple" @change="uploadFun">
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
}
},
methods:{
uploadFun(event){
let formData = new FormData();
for(var i=0;i<event.target.files.length;i++) { //循环获取上传个文件
formData.append("files", event.target.files[i]);
}
formData.append('company','xxxxxx');
axios.post('http://xxxxxxxx',formData)
},
}
}
</script>
<style scoped>
img{
width: 300px;
}
</style>