自己封装一个文件上传函数（使用axios）

谁借莪１个温暖的怀抱￠ 2023-09-25 12:09 51阅读 0赞

昨天在写博客的个人动态页面，里面涉及到了图片上传。

之前我都是用的别人的插件和elementUI的upload组件。但是现在没法用了。

页面的效果差别有点大，如果改elementUI的样式，会很累。

这时候很愁人啊。(懒啊！)

这是页面开发的效果，很像qq空间的感觉。![dc8db4a2570323c15ee69628276c9e08.png][]

我参考了(简称xhr)和Fetch

文档地址：

XMLHttpRequest：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

fetch：https://developer.mozilla.org/en-US/docs/Web/API/Fetch\_API

上面的xhr其实就是我们用的最多的http的核心函数，早年的jquery.ajax和如今的axios都是用的这个。

fetch，兼容性差点，但是是最新的标准函数。已经没有那么多乱七八糟的东西了。把xhr干成了ajax的样子。

总结：

xhr的情况下需要完整的自己写一遍ajax函数

fetch呢是新标准，缺点是ie全系不支持，并且edge也有部分不支持。

哎呀：就是懒啊。不想自己写。(而且：自己写封装要考虑好多东西)

这个吗，没什么多说的。肯定不会选jq。

而且我早先的时候自己封装过axios，形成了自己项目下的专属使用的ajax函数。所以这次的封装是在自己封装的ajax函数上进行复用。

这里放出下我现如今的整体的axios内部的情况。

主角是下半部分的axios.upload

"use strict";

import Vue from "vue";

import axios from "axios";

import VueAxios from "vue-axios";

import \{ Notification, Loading \} from "element-ui";

import apiList from "https://blog.csdn.net/qq\_32858649/article/details/api-list"; //接口列表数据

const store = require("store");

import control from "@/common/control\_center/index";

// axios全局导入设置

Vue.use(VueAxios, axios);

Vue.prototype.$api = apiList; //将接口列表数据绑定到vue全局

//自定义消息提示函数信息

let customMsg = \{

//成功信息提示

sucIfno(info) \{

Notification(\{

title: "答对了！",

type: "success",

message: info

\});

\},

//错误信息提示

errIfno(info) \{

Notification(\{

title: "答错了呢",

type: "error",

message: info

\});

\};

// 授权函数封装

const authorize = herders => \{

const user\_info = store.get("user\_info");

if (user\_info && user\_info.sign) \{

herders.Authorization = user\_info.sign;

return herders;

\} else \{

return herders;

\};

// axios函数封装

const ajax = (\{

url = "",

loading = false, //加载拦截

baseURL = apiList.baseURL,

data = \{\},

headers = \{ "Content-Type": "application/json;charset=UTF-8" \}, //头部信息处理

method = "get",

success = false, //成功信息提示

error = true, //错误信息提示

timeout = 1000

\}) => \{

// 数据过滤，过滤字段中空数据等

const filter = record => \{

for (let key in record) \{

!record\[key\] && delete record\[key\];

return record;

\};

//接口全局加载提示

let loadingInstance = "";

if (loading !== false) \{

loadingInstance = Loading.service(\{

lock: true,

text: loading !== true ? loading : "努力加载中……",

spinner: "el-icon-loading",

background: "rgba(0, 0, 0, 0.5)"

\});

return new Promise((suc, err) => \{

// 预处理数据部分

method = method.toLocaleLowerCase(); //转化为小写

headers = authorize(headers);

axios(\{

url: url,

baseURL: baseURL,

headers: headers,

method: method,

\[method === "post" ? "data" : "params"\]: filter(data),

timeout: timeout

\})

.then(response => \{

loadingInstance && loadingInstance.close();

// 刷新口令以及接口判断是否退出登录

if (!control.refresh\_sign\_or\_out(response)) \{

customMsg.errIfno("数据异常，退出登录");

err(response);

const res = response.data;

//自定义成功失败处理，code值代表后端接口数据处理成功或者失败

// 后端返回格式

if (res && res.code === 0) \{

success !== false &&

customMsg.sucIfno(success === true ? "信息处理成功" : success);

suc(res);

\} else \{

error !== false &&

customMsg.errIfno(res.msg ? res.msg : "信息处理失败");

err(res);

\})

.catch(e => \{

console.log(e);

loadingInstance && loadingInstance.close();

error !== false ? customMsg.errIfno("接口异常") : false;

//catch代表网络异常部分和后端返回结果无关

err(e);

\});

\};

//暴露的ajax函数，进一步封装节流和防抖

let shakeTime = "";

axios.ajax = options => \{

//参数预处理

let shake = options.shake || false; //不等于false直接传true或者防抖时间

//防抖函数处理

if (shake === false) \{

//不进行防抖处理

return new Promise((suc, err) => \{

ajax(options)

.then(e => \{

suc(e);

\})

.catch(e => \{

err(e);

\});

\} else \{

//进行防抖处理

return new Promise((suc, err) => \{

shakeTime && clearTimeout(shakeTime);

let callNow = !shakeTime;

if (callNow) \{

ajax(options)

.then(e => \{

suc(e);

\})

.catch(e => \{

err(e);

\});

shakeTime = setTimeout(

() => \{

shakeTime = null;

\}, //见注解

shake === true ? 700 : shake

);

\});

\};

axios.upload = options => \{

// 对uri地址进行数据拼接

const new\_url = obj => \{

if (obj) \{

let fields = "";

for (let key in obj) \{

fields = fields + \`$\{key\}=$\{obj\[key\]\}\`;

return "?" + fields;

\} else \{

return "";

\};

options.fdata = options.fdata || ""; //文件上传的url拼接地址

options.success = options.success || "文件上传成功";

options.url = options.url + new\_url(options.fdata);

options.headers = options.headers || \{\};

let header = \{ "Content-Type": "multipart/form-data" \};

for (let i in header) \{

options.headers\[i\] = header\[i\];

options.method = "post";

options.multiple = options.multiple || false; //是否多文件,默认false

//文件类型验证,注意传入数组,默认\["image/jpeg", "image/png"\]

options.type = options.type || \["image/jpeg", "image/png"\];

options.size = options.size || 0; //文件大小限制,默认0

options.max = options.max || 5; //最多上传几个文件

//文件验证处理

let input = document.createElement("input");

input.type = "file";

options.multiple ? (input.multiple = "multiple") : "";

input.click();

return new Promise((suc, err) => \{

let type = options.type;

input.addEventListener("input", watchUpload, false);

function watchUpload(event) \{

//移除监听

let remove = () => \{

input.removeEventListener("input", watchUpload, false);

input = null;

\};

const file = event.path\[0\].files;

const len = file.length;

// 文件数量限制

if (len > options.max) \{

err(file);

remove();

customMsg.errIfno("文件个数超过" + options.max);

return false;

let formData = new FormData();

for (let i = 0; i < len; i++) \{

// 文件大小限制

if (options.size !== 0 && file\[i\].size / 1024 / 1024 > options.size) \{

err(file\[i\]);

remove();

customMsg.errIfno(file\[i\].name + "文件超过指定大小");

return false;

// 文件类型限制

if (type.length > 0 && !type.includes(file\[i\].type)) \{

err(file);

remove();

customMsg.errIfno(file\[i\].name + "文件类型为" + file\[i\].type);

return false;

formData.append("dhtUpload", file\[i\], file\[i\].name);

options.data = formData;

// 最终进行文件上传

options.baseURL = "";

ajax(options)

.then(e => \{

suc(e);

\})

.catch(e => \{

err(e);

\});

\};

export default axios;

注意，其实本身是直接用的axios效果没什么差别。不要被我自己封装的ajax迷糊了。

这里的初衷就是我以函数的形式，而不在页面上存在input元素。我看网上很多教程都是预先定义好input节点的

这里我放出自己一个基于input的颜色选择器。文件的方式类似这个

//颜色选择器

colorSelect() \{

let input = document.createElement("input");

input.type = "color";

input.click();

input.addEventListener("input", watchColorPicker, false);

function watchColorPicker(event) \{

//console.log(event.target.value);

//移除监听

input.removeEventListener("input", watchColorPicker, false);

input = "";

![948a47f4d34c58082f98dad603214731.png][]

我们要的是path里面的值。看看path里面

![c616c6e9f0f44801f8c7c0a88336717a.png][]

注意这里就一个input元素，我们取input中的files数组就是我们的文件了。

这里看看单个文件的情况

![43f689ad9fd415e2af17576b704686da.png][]

这里我们能看到每个文件的大小，类型的情况。这些在后面会使用到。比如我们限制文件上传个数，文件的大小和文件类型

这里我直接放MDN文档了。

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using\_FormData\_Objects

其实我们只需要知道，是下面这样用的就行了。

let formData = new FormData();

formData.append("dhtUpload", file\[i\], file\[i\].name);

append参数：文件名称，文件，文件名称

这里其实我没太理解

放一下elementUI源码中的一个情况。

formData.append(option.filename, option.file, option.file.name);

具体没太懂。

const ajax = (\{

url = "",

loading = false, //加载拦截

baseURL = apiList.baseURL,

data = \{\},

headers = \{ "Content-Type": "application/json;charset=UTF-8" \}, //头部信息处理

method = "get",

success = false, //成功信息提示

error = true, //错误信息提示

timeout = 1000

\})

上面就是我的ajax函数的参数。

// 对uri地址进行数据拼接

const new\_url = obj => \{

if (obj) \{

let fields = "";

for (let key in obj) \{

fields = fields + \`$\{key\}=$\{obj\[key\]\}\`;

return "?" + fields;

\} else \{

return "";

\};

options.baseURL = ""; //个人处理，需要兼容之前的elementui等插件的上传

options.fdata = options.fdata || ""; //文件上传的url拼接地址

options.success = options.success || "文件上传成功";

options.url = options.url + new\_url(options.fdata);

options.loading = options.loading || true;

options.headers = options.headers || \{\};

options.headers\["Content-Type"\] = "multipart/form-data";

options.method = "post";

options.multiple = options.multiple || false; //是否多文件,默认false

//文件类型验证,注意传入数组,默认\["image/jpeg", "image/png"\]

options.type = options.type || \["image/jpeg", "image/png"\];

options.size = options.size || 0; //文件大小限制,默认0

options.max = options.max || 5; //最多上传几个文件

看着参数好多是吧。其实没多少。

解析一下：

fdata：因为文件上传地址肯定是多样的。但是我们又需要传递一些文件之外的信息。这时候其实可以在地址栏拼接参数。后端也是能获取到的。

new\_url 和fdata是为了这个存在的。

success:单纯的的文件上传提示信息。这个是因为之前ajax封装将提示信息封装进去了，但是默认成功不提示。

headers：这个没什么多说的，但是为了保证headers可能有别的存在，那么就这样进行设置了。"Content-Type"："multipart/form-data"这个是必须的

loading:文件加载的时候全屏出现加载提示

method:必须是post

multiple：这个这里缺失了一点，就是为了控制文件是多文件还是单文件上传

type:文件类型的控制。这里传入数组。默认控制图片文件。传入什么默认限制这些类型

size：限制每个文件的大小，0不限制

max：限制文件个数，单文件没意义

//文件验证处理

let input = document.createElement("input");

input.type = "file";

options.multiple ? (input.multiple = "multiple") : "";

input.click();

代码就这么简单，这里options.multiple就是刚才参数设置的意义所在了

这里我放整个控制部分，然后拆开解析

return new Promise((suc, err) => \{

let type = options.type;

input.addEventListener("input", watchUpload, false);

function watchUpload(event) \{

//console.log(event);

//移除监听

let remove = () => \{

input.removeEventListener("input", watchUpload, false);

input = null;

\};

const file = event.path\[0\].files;

const len = file.length;

// 文件数量限制

if (len > options.max) \{

remove();

customMsg.errIfno("文件个数超过" + options.max);

err(file);

return false;

let formData = new FormData();

for (let i = 0; i < len; i++) \{

// 文件大小限制

if (options.size !== 0 && file\[i\].size / 1024 / 1024 > options.size) \{

remove();

customMsg.errIfno(file\[i\].name + "文件超过指定大小");

err(file\[i\]);

return false;

// 文件类型限制

if (type.length > 0 && !type.includes(file\[i\].type)) \{

remove();

customMsg.errIfno(file\[i\].name + "文件类型为" + file\[i\].type);

err(file);

return false;

formData.append("dhtUpload", file\[i\], file\[i\].name);

options.data = formData;

// 最终进行文件上传

ajax(options)

.then(e => \{

suc(e);

\})

.catch(e => \{

err(e);

\});

// 没有问题下，清空监听。

remove();

\});

//console.log(event);

//移除监听

let remove = () => \{

input.removeEventListener("input", watchUpload, false);

input = null;

\};

const file = event.path\[0\].files;

const len = file.length;

// 文件数量限制

if (len > options.max) \{

remove();

customMsg.errIfno("文件个数超过" + options.max);

err(file);

return false;

let formData = new FormData();

这里看注释也知道我干了什么。

第一：我获取文件数组。并且预先将移除监听处理好，因为很多地方会用到。

第二：我判断文件数量限制。超过的话，promise(代码中的err(file))返回错误；并且注销监听

第三：先声明formdata对象

for (let i = 0; i < len; i++) \{

// 文件大小限制

if (options.size !== 0 && file\[i\].size / 1024 / 1024 > options.size) \{

remove();

customMsg.errIfno(file\[i\].name + "文件超过指定大小");

err(file\[i\]);

return false;

// 文件类型限制

if (type.length > 0 && !type.includes(file\[i\].type)) \{

remove();

customMsg.errIfno(file\[i\].name + "文件类型为" + file\[i\].type);

err(file);

return false;

formData.append("dhtUpload", file\[i\], file\[i\].name);

options.data = formData;

这里应该很明显了。我遍历每个file文件，并且进行文件大小和文件类型的判断限制。

最后将通过的formdata数据赋值给ajax的data对象中

// 最终进行文件上传

ajax(options)

.then(e => \{

suc(e);

\})

.catch(e => \{

err(e);

\});

// 没有问题下，清空监听。

remove();

this.axios

.upload(\{

url: this.$api.static().upload\_pictures

\})

.then(e => \{

console.log("成功", e);

\})

.catch(e => \{

console.log("错误", e);

\});

![0da163ef448c37c80e12f5ee0876c537.png][]

[dc8db4a2570323c15ee69628276c9e08.png]: https://img-blog.csdnimg.cn/img_convert/dc8db4a2570323c15ee69628276c9e08.png
[948a47f4d34c58082f98dad603214731.png]: https://img-blog.csdnimg.cn/img_convert/948a47f4d34c58082f98dad603214731.png
[c616c6e9f0f44801f8c7c0a88336717a.png]: https://img-blog.csdnimg.cn/img_convert/c616c6e9f0f44801f8c7c0a88336717a.png
[43f689ad9fd415e2af17576b704686da.png]: https://img-blog.csdnimg.cn/img_convert/43f689ad9fd415e2af17576b704686da.png
[0da163ef448c37c80e12f5ee0876c537.png]: https://img-blog.csdnimg.cn/img_convert/0da163ef448c37c80e12f5ee0876c537.png