标签：aaa 秘密 用户 webp let 文件类型 上传 知道

限制file上传类型

很多时候，我们都需要使用
<input type="file">
进行文件上传。
在上传的时候，我们需要对文件类型进行限制。
如果上传图片的时候。
用户只能够限制用户上传 
.jpeg,  .png,   .gif,  .bmp,  .jpg, .webp

图片类型说明，特别是webp

1、jpg（jpeg）：这是一种可以高度保留图片色彩信息的格式
2、png：该类型的图片可以实现透明
3、gif：图片所占体积小，可以实现动图
4、webp是一种支持有损压缩和无损压缩的图片文件格式

我想给大家分享一下webp这一种图片格式； webp
可能有些小伙伴是第一次看见这种格式 
webp（发音：weppy）是由谷歌于2010年推出的新一代图片格式，
它同时提供了有损压缩与无损压缩（可逆压缩）；
我们使用webp 图片优势：
它具有更优的图像数据压缩算法，能带来更小的图片体积；
拥有肉眼识别无差异的图像质量；
具备了无损和有损的压缩模式。
因为可以进行大幅度的压缩，向京东、淘宝都是大量使用这种格式的图片

accept 属性的使用

<template>
    <div>
        <input type="file" title=""  accept=".jpeg,.png, .gif,.bmp,.jpg">
    </div>
</template>

我们可以发现用户只能够选择我们规定的图片类型了
但是细心的小伙伴会发现
当我们选择[所有文件的时候]我们限制的文件类型就失效了
这个时候就很尴尬了。
经过我查阅文档，
并没有很好的办法去处理用户不去选择[所有文件的时候]
这个时候我们还得使用js去检测用户上传的文件类型

检测优化上传的文件类型

<template>
    <div>
        <input type="file" @change="funHander($event)"
         accept=".jpeg,.png, .gif,.bmp,.jpg">
    </div>
</template>

<script>
export default {
  setup () {
    function funHander(e){
    
        let fileName=e.target.files[0].name;
        console.log('文件上传的名称',fileName);
        
        // pop() 方法用于删除并返回数组的最后一个元素
        // 获取文件的后缀需要注意这样的文件类型 xxx.aaa.aaa.aaa.aaa.aa
        // 这样的文件名称必须获取最后一个.[点]结束的，才能精确知道该文件的类型
        let fileType=fileName.split(".").pop();
        
        console.log( '文件类型',fileType)
        let arr=['jpeg','png','gif','bmp','jpg'];
        // 如果我们可以查找到对应文件类型，
        // 说明用户选择正确[true]，否者错误[false]
        let typeRight=arr.indexOf(fileType)==-1 ? false :true;
        if(!typeRight){
          alert('文件类型错误，请上传jpeg,png,gif,bmp,jpg')
        }
        
    }
    return {funHander}
  }
}
</script>

这样我们就可以很好的去解决用户选择的文件类型了。
用户上传正确就可以上传点击上传按钮，
否者就清空用户上传的文件内容，并提示用户

实现上面的功能

<template>
    <div>
        <input type="file" @change="funHander($event)" 
         ref="fileinput"  accept=".jpeg,.png, .gif,.bmp,.jpg">
        <button> 上传</button>
    </div>
</template>

<script>
import {ref} from 'vue'
export default {
  setup () {
    let fileinput=ref();
    
    function funHander(e){
        let fileName=e.target.files[0].name;
        console.log('文件上传的名称',fileName);
        
        // pop() 方法用于删除并返回数组的最后一个元素
        // 获取文件的后缀需要注意这样的文件类型 xxx.aaa.aaa.aaa.aaa.aa
        // 这样的文件名称必须获取最后一个.[点]结束的，才能精确知道该文件的类型
        let fileType=fileName.split(".").pop();
        console.log( '文件类型',fileType)
        
        let arr=['jpeg','png','gif','bmp','jpg'];
        // 如果我们可以查找到对应文件类型，
        // 说明用户选择正确[true]，否者错误[false]
        let typeRight=arr.indexOf(fileType)==-1 ? false :true;
       
        if(!typeRight){
          alert('文件类型错误，请上传jpeg,png,gif,bmp,jpg')
          console.log(fileinput )
          fileinput.value='';//清空文件
        }
    }
    return {funHander,fileinput}
  }
}
</script>

标签：aaa,秘密,用户,webp,let,文件类型,上传,知道
来源： https://www.cnblogs.com/IwishIcould/p/15116490.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。