文件上传传统Ajax结合jquery

概述

在之前的文章里面介绍过通过组件库实现自动上传文件，但是必须结合组件库和vue,脱离了可能就不怎么实用了，今天介绍一种比较传统的文件上传的封装，任何地方都能用，没有局限性。

代码封装

   // 文件上传
        function uploadFile = function ({
            url,//文件上传地址
            file,//文件
            progressCallback,//进度条变化回调函数
            sucCallback,//上传成功回调
            errorCallback,//上传失败回调
            fileAccept = null,//上传格式限制
            fileSizelimit = null,//上传文件尺寸显示
            beforeCheckError = null,//上传文件之前的格式验证
            extraParam = {}//除文件以外的额外参数
        }) {
            if (fileAccept) {//文件格式验证
                    let res = Vue.prototype.$checkFileType({ fileAccept: fileAccept, fileType: file.type, fileExtention: file.name.split(".").pop() });
                if (!res) {
                    beforeCheckError();
                    return;
                }
            }
            if (fileSizelimit) {//文件大小验证
                if (file.size > fileSizelimit) {
                    beforeCheckError();
                    return;
                }
            }
            let form = new FormData();//涉及到文件上传，需要模拟form表单
            for (let i in extraParam) {
                form.append(i, extraParam[i]);
            }
            //自己项目文件上传的token相关验证
            form.append("X_Public_AccessToken", Vue.prototype.$cache.getItem("ELECTRIC_ADMIN_AccessToken"));
            form.append("X_Public_DeviceToken", Vue.prototype.$cache.getItem("ELECTRIC_ADMIN_DeviceToken"));
            form.append("file", file);
//通过ajax发送文件上传请求
            var xhr = $.ajax({
                url: baseUrl + url,
                contentType: false,
                type: "POST",
                data: form,
                processData: false,
                timeout: 60000, // 超时时间设置，单位毫秒
                dataType: "json", //返回的数据格式：json/xml/html/script/jsonp/text
                xhr: () => {
                    var xhr = new XMLHttpRequest();
                    //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                    xhr.upload.addEventListener("progress", event => {
                        //loaded代表上传了多少
                        //total代表总数为多少
                        // this.uploading = true;
                        console.log(event)
                        progressCallback(event);
                        //通过设置进度条的宽度达到效果
                    });
                    return xhr;
                },
                dataFilter: function (data, type) {
                    //返回处理后的数据
                    const par = /([^\\]{1}[":]{2}[ ]{0,1})([\d]{16,})([\r\n},]{1})/g;
                    let responseText = data;
                    responseText = responseText.replace(par, '$1"$2"$3');
                    // console.log(JSON.parse(responseText));
                    return responseText;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    errorCallback(textStatus);
                },
                success: (data, textStatus, jqXHR) => {
                    sucCallback(data);
                }
            });
        };

使用方法

uploadFile({
        url: "/fss/net/datafile/upload",
        extraParam: {
          fileType: "content"
        },
        file,
        fileAccept: this.fileAccept,
        beforeCheckError: () => {
          this.$Message.error("请上传pdf/epub格式文件!");
        },
        progressCallback: () => {
          this.uploading = true;
        },
        sucCallback: res => {
          if (res.Success) {
            // console.log(res);
            this.uploading = false;
            this.$Message.success("上传成功");
            // console.log(res.Data.Extension.toUpperCase());
            let data = { MediaTypeId: this.$objTypes[res.Data.Extension.replace(".", "").toUpperCase()], DataFiles: [{ Id: res.Data.Id, FileName: res.Data.FileName }] };
            // console.log(data);
            if (this.type == "edit" && this.form.Skus.length) {
              data = Object.assign({}, data, { Id: this.form.Skus[0].Id });
            }
            this.form.Skus = [];
            this.form.Skus.push(data);
          } else {
            this.uploading = false;
            this.$Message.error(res.Description ? res.Description : "上传失败");
          }
        },
        errorCallback: () => {
          this.uploading = false;
          this.$Message.error("上传失败");
        }
      });

总结

现在jQuery已经在不常用了，如果还是维护的是老项目，这个文件上传封装还是用得上的。