Zusammenfassung verschiedener Methoden zum Datei-Upload im Frontend (Code)

Der Inhalt dieses Artikels ist eine Zusammenfassung (Code) verschiedener Methoden zum Hochladen von Dateien im Frontend. Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

1. Senden Sie den Upload über das Formularformular

HTML-Enctype-Attribut ist unerlässlich

    <form action="http://localhost:8081/thingsparse/addorupdthingsparse" method="post" enctype="multipart/form-data">
         <input type="file" name="file" value="选择上传文件..."/>
         <input id="submit_form" type="submit" class="btn btn-success save" value="保存"/>
    </form>

Die obige Methode verwendet die eigenen Attribute des Formulars. Das Senden scheint Einfach, aber es hat auch seinen größten Nachteil: Es springt direkt nach Abschluss der Übermittlung, was die überwiegende Mehrheit der aktuellen Anforderungen nicht erfüllen kann. Dann werde ich eine andere Möglichkeit vorstellen, die Post-Methode von xaj und FormData direkt zum Hochladen von Dateien zu verwenden.

2. Hochladen per jQuery-Post-Anfrage

HTML-Mehrfachdatei-Upload

JS

    (function(){
        $('#upload').change(function(e){
            let files = e.target.files;
            let params = new FormData();
            for(let i = 0; i < files.length; i++){
                //visit_file就是后台用来接受的字段，因为是一个数组，所以加一个[]
                params.append('visit_file[]', files[i], files[i].name);
            }
            
            $.ajax({
                type: 'post',
                url: "http://192.168.1.101:8080/springbootdemo/file/upload",
                data: params,
                processData: false,//必不可少属性
                traditional: true,//必不可少属性
                contentType: false,//必不可少的属性
            }).success(function (data) {
                console.log(data);
            }).error(function () {
                console.log("上传失败");
        })
    })()

Diese Methode löst das Problem des Seitensprungs nach dem Hochladen von Dateien, aber was ist, wenn das von Ihnen hochgeladene Bild sehr groß ist? Als nächstes kommt eine Optimierungslösung, über die wir beim Hochladen größerer Dateien sprechen werden. Um das Benutzererlebnis zu verbessern, bieten wir den Benutzern heutzutage nicht nur das ultimative Erlebnis beim Surfen, sondern spüren auch keine Verzögerung beim Hochladen. Dies kann nicht vom Backend erledigt werden, sondern kann nur dem Frontend überlassen werden. Im Folgenden stellen wir dieses Optimierungsschema vor.

3. Lokale Vorschau, Canvas-Bildkomprimierung, Blob-Binärkonvertierung

HTML-Mehrfachdatei-Upload

JS

    (function(){
        $('#upload').change(function(e){
            let files = e.target.files;
            let params = new FormData();
            for(let i = 0; i < files.length; i++){
                //visit_file就是后台用来接受的字段，因为是一个数组，所以加一个[]
                params.append(&#39;visit_file[]&#39;, files[i], files[i].name);
            }
            //图片预览地址数组
            let previewArr = previewImage(files);   
            
            for(let i = 0 ; i < previewArr.length; i++){
                
            }   
        }
        
        //上传图片  压缩过的二进制文件只能单张上传处理，我试过多上同时上传失败了，你们也可以试试，也许可以找到方法
        function uploadImage(params){
                $.ajax({
                type: &#39;post&#39;,
                url: "http://192.168.1.101:8080/springbootdemo/file/upload",
                data: params,
                processData: false,//必不可少属性
                traditional: true,//必不可少属性
                contentType: false,//必不可少的属性
                }).success(function (data) {
                    console.log(data);
                }).error(function () {
                    console.log("上传失败");
                })
         }
        //图片预览
        function previewImage(files){
                let previewsArr = [];
                for(let i = 0; i < files.length; i++){
                    let fileReader = new FileReader();
                    fileReader.readAsDataURL(files[i]);
                    fileReader.onloaded = () => {
                        //数组放入获取的base64本地图片地址
                        previewsArr.push(fileReader.result);
                    }
                }
                
                return previewsArr;
            
          }
         //图片压缩   
         function compressImage(base64URL){
                let img = new Image();
                let canvas = document.createElement('canvas');
                let context = canvas.getContext('2d');
                img.src = base64URL;
                
                img.onload = () => {
                    // 图片原始尺寸
                    var originWidth = img.width;
                    var originHeight = img.height;
                    // 最大尺寸限制
                    let maxWidth = 400,
                      maxHeight = 400;
                    // 目标尺寸
                    let targetWidth = originWidth,
                      targetHeight = originHeight;
                    // 图片尺寸超过400x400的限制
                    if (originWidth > maxWidth || originHeight > maxHeight) {
                      if (originWidth/originHeight > maxWidth/maxHeight) {
                        //更宽，按照宽度限定尺寸
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                      }else{
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                      }
                    }
                    
            
                    // canvas对图片进行缩放
                    canvas.width = targetWidth;
                    canvas.height = targetHeight;
                    // 清除画布
                    context.clearRect(0, 0, targetWidth, targetHeight);
                    // 图片压缩
                    context.drawImage(img, 0, 0, targetWidth, targetHeight);
            
            
                    //canvas直接转blob二进制文件，但是大部分浏览器不支持
                    // canvas.toBlob(function (blob) {
                    //   console.log(blob)
                    //   resolve(blob)
                    // }, 'image/png');
            
                    let base64Data = canvas.toDataURL("image/png", 0.92);
                    
                    let blob = dataURItoBlob(base64Data);
                    //上传图片
                    
                    let params = new FormaData();
                    params.append('visit_file', blob, 'cavas.png');
                    
                    uploadImage(params);
                    
            }
        }
        
          /**
           * base64 转二进制文件
           * @param {*} base64Data 
           */
          function dataURItoBlob(base64Data) {
            var bytes = window.atob(base64Data.split(',')[1]); //去掉url的头，并转换为byte
        
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
              ia[i] = bytes.charCodeAt(i);
            }
        
            return new Blob([ab], {
              type: &#39;image/png&#39;
            });
          }
        
    })()

Hier wird die lokale Base64-Datei über FileReader abgerufen, und dann wird das Bild über Canvas komprimiert und schließlich in eine binäre Blob-Datei konvertiert und an den Server übertragen. Was hier besser gemacht werden kann, besteht darin, Versprechen zu verwenden, um die Komprimierungsfunktion zurückzugeben, ohne die Komprimierungsfunktion aufrufen und hochladen zu müssen, um die Kopplung zu reduzieren. Zum Verständnis aller werde ich sie hier nicht trennen. Haha~~ Hauptsächlich, weil ich es mühsam finde...

4. Bilder mit Vue+axios hochladen

Der Seitenstil, die Bildkomprimierung und die Vorschau sind hier gleich Wie oben konfiguriere ich hauptsächlich das http von Axois, damit die Post-Schnittstelle erfolgreich hochgeladen werden kann.

        /**
       * 
       * @param {路由} url 
       * @param {路由参数} params 
       * @param {文件数据} body 
       */
      upload(url, params = '', body = {}) {
        let path = config.host + url + params;
        // console.log(body);
        return axios({
          method: "POST",
          url: path,
          data: body,
          processData: false, //必不可少参数
          traditional: true, //比不可少参数
          contentType: false,//比不可少参数
          headers: {
            'token': localStorage['token'],
            'originno': config.originno,
            "Content-Type": false
          }
        }).then(
          res => res
        ).catch((error) => {
          console.log(error);
        })
      }

Ich bin kürzlich bei der Arbeit an einem Projekt auf ein Problem gestoßen. Damals habe ich Vue+Axois verwendet und festgestellt, dass die Datei nicht übertragen wurde. Solange die drei Konfigurationen erforderlich sind, kann der Upload mit wenigen Parametern erfolgreich sein. Wenn Sie möchten, dass Benutzer ein besseres Erlebnis haben, können Sie die Bilder komprimieren und lokal in der Vorschau anzeigen.

Verwandte Empfehlungen:

So verwenden Sie PHP und Laui, um den Code zum Hochladen und Anzeigen von Bildern zu implementieren

Anleitung Implementieren Sie es in PHP-Code zum Komprimieren von Bildern in gleichen Anteilen

Das obige ist der detaillierte Inhalt vonZusammenfassung verschiedener Methoden zum Datei-Upload im Frontend (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!