<input type="file">文件上传

<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作 .

常用input属性：

　　accept：指示file类型，没有时表示不限制类型，填入格式后选择文件时只能看见被允许的文件

　　　　　　accept="image/png" 或 accept=".png" 表示只接受 png 图片.

　　　　　　accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" 表示接受 PNG/JPEG 文件.

　　　　　　accept="image/*" 接受任何图片文件类型. audio/* 表示音频文件video/* 表示视频文件

　　　　　　accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"  接受任何 MS Doc 文件类型.

　　　　　　accept 属性并不会验证选中文件的类型. 他只是为开发者提供了一种引导用户做出期望行为的方式而已, 用户还是有办法绕过浏览器的限制.

　　　　　　因此, 在服务器端进行文件类型验证是必不可少的.

　　multiple：Boolean ，指示用户能否多个输入，type为email或file时生效

　　required：指定用户在提交表单之前必须保证该元素值不为空。当 type 属性是 hidden，image 或者按钮类型（submit，reset，button）时不可使用。

　　　　　　　:optional 和 :required CSS 伪元素的样式将可以被该字段应用作外观。

事件：

　　change事件

示例

样式更改：可以通过设置opcitity：0；font-size:0进行覆盖操作

<template>
    <div>
        <!-- 上传处触发change事件 -->
        <input type="file" id="upload" multiple @change="upload"></input>
    </div>
</template>

<script>
    export default {
        methods: {
            upload(e) {
                // 获取文件信息
                // let files=document.getElementById('upload').files
                // let file = e.target.files[0]

                // 每个 file 对象包含了下列信息:
                // name: 文件名.
                // lastModified: UNIX timestamp 形式的最后修改时间.
                // lastModifiedDate: Date 形式的最后修改时间.
                // size: 文件的字节大小.
                // type: 文件类型.

                // 转化为base64
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (res) {
                    let base = res.target.result
                }

                // 获取/限制图片尺寸
                let myimg = URL.createObjectURL(file);
                let img = new Image();
                img.src = myimg;
                img.onload = function () {
                    if (img.width !== 860 && img.height !== 450) {
                        alert("只能上传860*450px的图片！");
                    } else {
                        // 操作……
                        // 还可以根据file.type判断类型，根据file.size限制判断字节
                        const formdata = new FormData()
                        formdata.append('file', file)
                        // 调接口，data为formdata
                    }
                }
            }
        }
    };
</script>