“This is the fifth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

Limit the file upload type

<input type="file"> <input type="file"> When uploading, we need to restrict the file type. If you upload an image. Users can only restrict uploads.jpeg,.png,.gif,.bmp,.jpg,.webpCopy the code

Image type description, especially webP

JPG (JPEG) : this is a format that can highly retain the color information of the image. PNG: This type of image can achieve transparency. 4. Webp is an image file format that supports lossy compression and lossless compression. I want to share webP with you as an image format; Webp (pronounced weppy) for those of you who are seeing this for the first time, Webp (pronounced Weppy) is a next-generation image format released by Google in 2010 that offers both lossy and lossless (reversible) compression; We use WebP image advantages: it has a better image data compression algorithm, can bring a smaller image volume; With visual recognition of the same image quality; Lossless and lossy compression modes are available. Because can carry on the large scale compression, to the jingdong, Taobao is a large number of pictures using this formatCopy the code

Use of the Accept attribute

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

We can see that the user can only select the specified image type, but careful friends will find that when we select [all files] our restricted file type is invalid and this is very embarrassing. After I consulted the document, there is no good way to deal with [when all files are not selected] by the user. At this time, we still need to use JS to detect the file type uploaded by the userCopy the code

The type of uploaded files is detected and optimized

<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(' name of file to upload ',fileName); // the pop() method is used to remove and return the last element of the array. // The pop() method is used to remove and return the last element of the array. Let fileType= filena.split (".").pop(); Console. The log (' file type, fileType) let arr = [' jpeg ', 'the PNG', 'GIF, BMP,' JPG ']. Let typeRight= arr.indexof (fileType)==-1? false :true; if(! TypeRight){alert(' file type error, please upload jpeg, PNG, GIF, BMP, JPG ')}} return {funHander}}} </script>Copy the code
So we can solve the user's choice of file type very well. If the user uploads correctly, he/she can upload the file by clicking the upload button. If the user uploads incorrectly, the file content will be cleared and the user will be promptedCopy the code

Implement the above functions

<template> <div> <input type="file" @change="funHander($event)" ref="fileinput" accept=".jpeg,.png, .gif,.bmp,.jpg"> <button> upload </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(' name of file to upload ',fileName); // the pop() method is used to remove and return the last element of the array. // The pop() method is used to remove and return the last element of the array. Let fileType= filena.split (".").pop(); Console. The log (' file type, fileType) let arr = [' jpeg ', 'the PNG', 'GIF, BMP,' JPG ']. Let typeRight= arr.indexof (fileType)==-1? false :true; if(! TypeRight){alert(' File type error, please upload JPEG, PNG, GIF, BMP, JPG ') console.log(fileInput) fileinput.value= "; }} return {funHander,fileinput}}} </script>Copy the code