原生input上传图片

项目中经常用到上传图片功能,所以传上来方便以后使用

<input type="file" accept="image/*" @change='filechange'>

file-input 有如下属性：

• accept
  指定选择文件类型的范围。默认为所有文件类型
  图片为 accept=”image/*“
  文件类型取值见MDN
• capture
  当文件类型为图片或视频且在移动端时，此属性才有意义。
  capture = ‘user’ 调用前置摄像头
  capture = ‘environment’ 调用后置摄像头
  不设置则为用户自己选择
• multiple
  一个 Boolean 值，如果存在，则表示用户可以选择多个文件
• files
  返回一个 FileList，列出每个所选文件对象。除非 multiple 指定了属性，否则此列表只有一个成员。主要用于 JS 操作

filechange(e){
            var that=this;
            var file = e.target.files[0];
            var imgSize=file.size/1024;
            if(imgSize>200){
                //这里可以自己做限制图片大小,也可以不做
                alert('请上传大小不要超过200KB的图片')
            }else{
                var reader = new FileReader();
                reader.readAsDataURL(file); // 读出 base64
                reader.onloadend = function () {
                    // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
                    let dataURL = reader.result.split(",")[1];;
                    // console.log(dataURL)
                    // 逻辑处理
                    //axios请求写这里,dataURL就是后端需要的base64的数据
                };
            }
        },