Résumé des différentes méthodes de téléchargement de fichiers sur le front-end (code)

Le contenu de cet article est un résumé (code) de diverses méthodes de téléchargement de fichiers sur le front-end. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

1. Soumettre le téléchargement via le formulaire de formulaire

L'attribut HTML enctype est essentiel

    <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>

La méthode ci-dessus peut transmettre automatiquement le formulaire La soumission avec des attributs semble simple, mais elle présente aussi son plus gros inconvénient, à savoir qu'elle saute directement une fois la soumission terminée, ce qui ne peut pas répondre à la grande majorité des besoins actuels. Ensuite, je présenterai une autre façon d'utiliser directement la méthode post de xaj et FormData pour télécharger des fichiers.

2. Téléchargement via une demande de publication jQuery

Téléchargement multi-fichiers HTML

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("上传失败");
        })
    })()

Cette méthode résout le problème du saut de page après le téléchargement de fichiers, mais que se passe-t-il si l'image que vous téléchargez est très grande ? Vient ensuite une solution d'optimisation dont nous allons parler lors du téléchargement de fichiers plus volumineux. De nos jours, afin d'améliorer l'expérience utilisateur, nous offrons non seulement aux utilisateurs une expérience de navigation ultime, mais nous ne ressentons pas non plus de décalage lors du téléchargement. Cela ne peut pas être fait par le back-end et ne peut être laissé qu'au front-end. Ci-dessous, nous présentons ce schéma d'optimisation.

3. Aperçu local, compression d'image Canvas, conversion de fichier binaire blob

Téléchargement multi-fichiers HTML

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;
            });
          }
        
    })()

Ici, le fichier base64 local est obtenu via FileReader, puis l'image est compressée via Canvas, et enfin convertie en fichier blob binaire et transmise au serveur. Ce qui peut être mieux fait ici, c'est d'utiliser des promesses pour renvoyer la fonction de compression sans avoir à appeler et télécharger dans la fonction de compression pour réduire le couplage. Pour la compréhension de tous, je ne les séparerai pas ici. Haha~~ Principalement parce que je trouve cela gênant...

4. Téléchargez des images avec Vue+axios

Le style de page, la compression d'image et l'aperçu ici sont les mêmes. comme ci-dessus. Ici, je configure principalement le http d'axois pour que l'interface de publication puisse télécharger avec succès.

        /**
       * 
       * @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);
        })
      }

J'ai également rencontré un besoin récemment en travaillant sur un projet, à cette époque, j'utilisais vue+axois Comment soumettre et signaler des erreurs, et j'ai finalement découvert que le fichier n'était pas. transférés Tant que les trois configurations ont été configurées, les paramètres essentiels peuvent être téléchargés avec succès. Si vous souhaitez que les utilisateurs aient une meilleure expérience, vous pouvez compresser et prévisualiser les images localement.

Recommandations associées :

Comment utiliser php et layui pour implémenter le code de téléchargement et de prévisualisation des images

Comment implémentez-le en php Code pour compresser les images dans des proportions égales

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!