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>

上一篇 下一篇

猜你喜欢

热点阅读