<template>
<div id="app">
<!--
action:存放的是文件上传到服务器的接口地址
-->
<!--组件里 show-file-list 是否显示已上传文件列表 -->
<!--组件里 on-success 文件上传成功时的钩子，成功时触发 -->
<!-- before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->
<!-- action存放的是上传到服务器的接口地址 -->
<el-upload
drag
action="/single1"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>
<!-- IMG -->
<div class="uploadImg" v-if="img">
<img :src="img" alt />
</div>
</div>
</template>
<script>
/*
* 文件上传有两套方案：
* 1. 基于文件流（form-data） element-ui上传组件默认是基于文件流的
* 2. 客户端需要把文件转化为BASE64
*
* 默认上传
* 格式：multipart/form-data
* 数据格式：form-data
* file 文件流信息
* filename 文件名字
* 上传成功后获取服务器返回信息，通知on-success回调函数执行
* 内部封装了ajax
*/
export default {
name: "App",
data() {
return {
img: null,
};
},
methods: {
// <!--组件里 on-success 文件上传成功时的钩子，成功时触发 result是服务器返回的结果-->
handleSuccess(result) {
//通过服务器返回的code值，判断成功 然后将返回的path地址，赋值给img
if (result.code == 0) {
this.img = result.path;
}
},
// 组件里before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
// 在这里面判断一些条件，例如多大的，什么格式的才能上传
beforeUpload(file) {
// 格式校验----------------------------
console.log(file) //可以知道得到文件的type类型和文件的size大小
let { type, size } = file; //file这个属性因为包含这两个值，分别赋值给变量
//判断文件的格式 正则表达式 匹配文件类型
if (!/(png|gif|jpeg|jpg)/i.test(type)) {
this.$message("文件合适不正确~~"); //组件的提示方法
return false; //既然判断出格式不正确，那么就return 终止函数，不往下走了
}
//判断文件大小1024B=1KB 1024KB=1MB 假设限定必须在200M以内的
if (size > 200 * 1024 * 1024) {
this.$message("文件过大，请上传小于200MB的文件~~");
return false;
}
return true; // beforeUpload(file) 最终是返回ture的
},
},
};
</script>
