File uploading seems to be a very routine requirement, but it is really not easy to do the extreme, did you do the following points?

  • Upload progress bar (Interactive optimization)

  • Uploading the same file multiple times does not take effect

  • Wrong file, pictures are not satisfactory upload again

  • File size check

    • FileObj. Check the size
    • Verify file binary header information

  • Validation type (extension)

    • Fileobj. name Is invalid for verification (how to verify the modified extension)
    • Verify file binary header information

  • Check wide high

  • Whether drag-and-drop upload is supported

  • Whether copy and paste upload is supported

  • Whether large files can be uploaded offline

  • Large file slice upload add fingerprint

  • How to optimize MD5 for large files

  • Consider performance and optimization (Web-worker /time-slice)

  • File compression (such as Canvas compression)

  • Upload timeout retry

  • .

Basically meet the rigid requirements of upload

    <div class="file-upload-wrap"> <div class="file-item-wrap"> <img class="icon-camara" src=".. /assets/img/camara.svg" > <img v-show="isShow" class="icon-close" @click="deletePreview" src=".. /assets/img/close. SVG "> <p class="des"> Please select the positive photo of id card or upload it </p> <! <img class="preview" v-show="isShow" : SRC ="imgSrc" > <input class="inp" type="file" ref="inp" @click="clearInp" @change="showPreview"> </div> < button@click ="upload"> </button> </div> data() {return {imgSrc: '', fileObj: {} } }, computed: { isShow() { return !! ImgSrc}}, methods: {// Local preview showPreview() {const vm = this this.fileobj = vm.$refs.inp.files[0] if (! window.FileReader) return const reader = new FileReader() reader.readAsDataURL(vm.fileObj) reader.onloadend = function() $nextTick(() => {vm.imgsrc = that.result})}}, Upload () {// check file format this.checktype (this.fileobj) // checkSize this.checksize (this.fileobj) // upload file this.uplodHandler(this.fileObj) }, DataURLtoBlob (dataURL) {const vm = this vm. HexStr = "let dataViewObj = {} if (! window.FileReader) return const reader = new FileReader() reader.readAsArrayBuffer(vm.fileObj) reader.onloadend = function(res) { const that = this vm.$nextTick(() => { dataViewObj = new DataView(that.result) for (let i = 0; i < dataViewObj.byteLength; I ++) {vm.hexStr += dataViewobj.getuint8 (I).toString(16)} CheckType (hexStr) {const mimeTypeList = [{typeName: 'JPG/JPEG ', hexStr: 'FFD8FF'}, {typeName: 'png', hexStr: '89504E47'}] Slice (0, 6).toupperCase () const pngHex = hexstr.slice (0, 6) 8).toUpperCase() const matchTypeList = mimeTypeList.filter((item) => item.hexStr === jpegHex || item.hexStr === pngHex) if (! Matchtypelist.length) {this.$dialog.alert({title: ' ', message: 'Please upload in PNG format, '}) return false} /* // get file name const name = fileobj. name // File extension const ext = Name. The split ('). [1] toLowerCase () / / allow to upload the format of the const imgType = [' PNG ', 'JPG', 'jpeg', 'the PNG', 'JPG', 'JPEG'] const filterType = imgType.filter((item) => item === ext) if (! Filtertype.length) {this.$dialog.alert({title: ' ', message: 'Please upload in PNG format, JPG or JPEG photo format '}) return false} */}, CheckSize (fileObj) {if (fileObj. Size >= 10 * 1024) {this.$dialog.alert({title: 'alert ', message: }) return false}}, // Upload uplodHandler(fileObj) {// TODO upload interface axios.post(...) }, // Clear the input value clearInp() {this.$refs.inp.value = ""}, {this.imgsrc = "this.$refs.inp.value ="}}Copy the code

Continuously updated…

// TODO

Adding a Progress bar

Drag and drop to upload

Copy and paste upload

File to binary for header verification (to prevent tampering with file extensions)

  • File type header information identifier
JPEG (JPG), FFD8FF PNG (PNG), 89504E47 GIF (GIF), 47494638 TIFF (tif), file header: 49492A00 Windows Bitmap (BMP), file header: 424D CAD (DWG), File header: 41433130 Adobe Photoshop (PSD), file header: 38425053 Rich Text Format (RTF), header: 7B5C727466 XML (XML), header: 3C3F786D6C HTML (HTML), header: 7B5C727466 68746 d6c3e Email [thorough only] (eml), file header: 44656 c69766572792d646174653a Outlook Express (DBX), file header: CFAD12FEC5FD746F Outlook (PST), file header: 2142444E MS Word/Excel (xls.or.doc), file header: D0CF11E0 MS Access (MDB), file header: 5374616E64617264204A WordPerfect (WPD), file header: FF575043 Postscript (eps.or.ps), file header: Adobe Acrobat (PDF), Header: 255044462D312E Quicken (QDF), Header: AC9EBD8F Windows Password (PWL), E3828596 ZIP Archive (ZIP), file header: 504B0304 RAR Archive (RAR), file header: 52617221 Wave (WAV), file header: 57415645 AVI (AVI), file header: 41564920 Real Audio (RAM), 2E7261FD Real Media (RM), 2E524D46 MPEG (MPG), 000001BA MPEG (MPG), 000001B3 Quicktime (MOV), File header: 6D6F6F76 Windows Media (ASF), file header: 3026B2758E66CF11 MIDI (MID), file header: 4D546864Copy the code
  • File conversion
    /** * Network image file to Base64 */
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0.0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
        var dataURL = canvas.toDataURL("image/" + ext);
        return dataURL;
    }
     
     
    /** *Base64 string to binary */
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(', '),
        mime = arr[0].match(/ : (. *?) ; /) [1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
    });
Copy the code