<template>
<div>
<p>file 组件</p>
<input type="file" @change="fileChange" multiple>
<button @click="submit">提交</button>
<img style="width: 50px;" :src=imgbase64 >
</div>

</template>

<script>

let _fileObj;//定义操作 formdata 对象实现单文件上传的空变量
export default {
data(){
return{
imgbase64:'',
}
},
methods:{
fileChange(e){
let files = e.target.files[0];
_fileObj = files;

      let _newBlob = new Blob([files]);//将files对象转为blob对象,第一个参数必须是数组

      //fileReader对象 将文件异步方式转为base64格式或文本格式
      let fr = new FileReader();
      fr.readAsDataURL(_newBlob);

      //通过onload事件监听获取转换的结果,箭头函数赋值给onload，不改变this指向,直接操作data函数中定义的数据
      //文件缩略图操作
      fr.onload = ()=>{
        this.imgbase64 = fr.result
      }

    },
    async submit(){
      let _formdata = new FormData();

      //append() 将上传者信息或者文件添加到_formdata
      _formdata.append('user','syb');
      _formdata.append('file',_fileObj);

    //模拟axios上传请求
      let data = await axios.post('//url',_formdata);
    }

}
};
</script>

<style scoped>
</style>

<template>
<div>
<p>manyFile 组件</p>
<input type="file" @change="fileChange" multiple />
<button @click="submit">多选提交</button>
<img style="width: 50px" :src="imgbase64" />
<span v-for="item in fileList" :key="item.name">{{ item.name }}</span>
<!-- 使用一个 span 标签预览要上传的文件名 -->
</div>
</template>

<script>
export default {
data() {
return {
fileList: [],//定义空数组存储多个文件
imgbase64: "",
};
},
methods: {
fileChange(e) {
//e.target.files;//一个由不同文件对象组成的对象

      //检测e.target.files是否有多个文件
      if(e.target.files.length > 1){
        console.log(e.target.files);
        this.fileList = [...e.target.files];
        //this.fileList = this.fileList.concat(e.target.files);
      }else{
        this.fileList.push(e.target.files[0])
      }

    },
    async submit() {
    	//循环fileList,每次都创建一个formdata对象上传 
        this.fileList.forEach( async item=>{
            let _formdata = new FormData();
            _formdata.append(item.name, item);
            //模拟axios上传请求
      		let data = await axios.post('//url',_formdata);
        })


    },

},
};
</script>

<style scoped>
</style>

<template>
<div>
<p>sliceFile 组件</p>
<input type="file" @change="fileChange"/>
<button @click="submit">切片提交</button>
<div>
上传进度：{{ precent }}%
</div>
</div>
</template>

<script>
import { test } from "../request/api";
let _fileObj;
export default {
data() {
return {
precent: 0,//上传进度百分比
};
},
methods: {
fileChange(e) {
_fileObj = e.target.files[0];
},

      async submit() {

        let size = 2*1024*1024; //定义一次切片为2M
        let fileSize = _fileObj.size;
        let current = 0;//定义当前已经上传的文件部分大小

        //判断如果已经上传的部分小于文件总大小
        while(current < fileSize){
          let _formData  = new FormData();

    	  //一次添加2M大小的切片  注意添加时的说明一般为文件名，后端接收后按照文件名标识拼接
          _formData.append(_fileObj.name,_fileObj.slice(current,current+size))
          let data = await test(_formData);
          //计算当前上传进度，展示到页面
          this.precent = Math.ceil((current/fileSize)*100)
          current += size;
        }
      },
    },

};
</script>

<style scoped>

</style>