脚本宝典收集整理的这篇文章主要介绍了Vue3 + axios + vue-vben-admin 实现单文件上传功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

场景

最近一段时间使用 vue-vben-admin 上传单文件中，用人家自定义的 uploadFile 出现了 process 未知问题，导致流程直接中断，时间紧迫，索性自己用 axios 封装了个。 代码在对应位置都加了注释，方便不同阶段道友查看，大神可直接路过 上代码

// src/utils/http/axios/upload.js
/**
 * @author zxn
 * @description axios 上传单文件
 * @param {object.url} - 请求接口
 * @param {object.method} - 请求方法
 * @param {object.file} - 上传的文件
 * @param {object.extraParams} - 上传附加参数
 * @param {object.fileName} - 上传的文件名称
 * @param {object.config} - axios 其他配置
 */

import axios from 'axios';
import { getToken } from '/@/utils/auth'; // 获取 token
import { useMessage } from '/@/hooks/web/useMessage'; // 引入提示框

const { createMessage } = useMessage(); // 引入 message 提示
const token = getToken();
let headers = { 'Content-Type': 'multipart/form-data', Authorization: token }; // 请求头设置

// 因为整块文件只有一个导出，所以使用默认导出功能，并使用 ES6 对参数进行默认赋值，不懂的小伙伴可看[阮大大的教程](https://es6.ruanyifeng.com/#docs/destructuring)
export default function ({
  url,
  method = 'POST',
  file,
  extraParams = {},
  fileName = 'file',
  config
} = {}) {
  // 创建 FormData 对象，并通过 append() 方法添加参数
  const fd = new FormData();
  fd.append(fileName, file);

  // 这里对附加参数进行统一处理，全部添加到 FormData 对象内
  Object.keys(extraParams).length &&
    Object.keys(extraParams).forEach(key => {
      if (Array.isArray(extraParams[key])) {
        extraParams[key].forEach(item => {
          fd.append(`${key}[]`, item);
        });
        return;
      }
      fd.append(key, extraParams[key]);
    });

  // 这里使用 Promise 对象，方便链式调用
  return new Promise((resolve, reject) => {
    axios
      .request({
        url,
        method,
        data: fd,
        headers,
        ...config
      })
      .then(({ data }) => {
        const { code, message } = data;
        if (code != 200) {
          createMessage.error(message);
          reject(new Error(message));
        }
        resolve(data);
      })
      .catch(error => {
        reject(new Error(error));
      });
  });
}

脚本宝典总结

以上是脚本宝典为你收集整理的Vue3 + axios + vue-vben-admin 实现单文件上传功能全部内容，希望文章能够帮你解决Vue3 + axios + vue-vben-admin 实现单文件上传功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。