上传

axios封装

import Axios from "axios"
import qs from 'qs';

import { basketStore } from '../store/user';
const StorePart = basketStore();

const BASE_URL = ''; //请求接口url 如果不配置 则默认访问链接地址
const TIME_OUT = ''; // 接口超时时间
const instance = Axios.create({
    baseURL: BASE_URL,
    TIME_OUT: TIME_OUT,
    transformRequest: [
        (data, headers) => {
          if (headers['Content-Type']?.includes('form-data')) {
            return data;
          } else {
            
            return qs.stringify({ ...data, token: StorePart.getToken }); // 序列化请求参数
          }
        },
      ],
})

// 可以添加一个axios的全局配置
instance.defaults.headers.post = {
    "Content-Type": 'application/x-www-form-urlencoded'
}

// 添加请求拦截器
instance.interceptors.request.use((config) => {
    // 可以在此处添加一些共有的请求拦截
    //...

    if(StorePart.getToken){
        config.headers.accessToken  = StorePart.getToken
    }
    return config
}, (error) => {
    return Promise.reject(error);
})

// 添加响应拦截器
instance.interceptors.response.use((response) => {
    const res = response.data;
    return res;
    // 在此处添加一些响应拦截
    //...
}, (error) => {
    return Promise.reject(error);
})

export default instance;

上传api.js

import defRequest from '@/utils/http';
import { getAPI } from '@/utils';
/**
 * 上传本地文件至服务器
 */
export function dfsUploadFile(data: any) {
  return defRequest({
    url: `${getAPI()}/dfs/upload/file`,
    method: 'post',
    data,
    headers: { 'Content-Type': 'multipart/form-data' },
  });
}


import avatar from '../assets/avatar_default.png';

export const assets = {
  avatar: avatar,
};



export default {
  dfsUploadFile,
};

api.js

import defRequest from '@/utils/http';
import { getAPI } from '@/utils';
/**
 * 删除商品足迹
 */
export function goodsVisitLogDelete(data?: Recordable) {
  return defRequest({
    url: `/goods/visitLog/delete`,
    method: 'post',
    data,
  });
}

/**
 * 品牌详情
 */
export function goodsBrandDetail(data?: Recordable) {
  return defRequest({
    url: `/shop/goods/brand/detail`,
    method: 'get',
    params: data,
  });
}

vue文件

<template>
    <div class="container">
      <h1>组件</h1>
      <van-uploader :before-read="beforeRead" :after-read="afterRead" > </van-uploader>
   
    </div>
  
  
  </template>
  
  
  
  
  
  
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  import { Toast } from 'vant';
  import Compressor from 'compressorjs';
  import API_DFS from '../../API/upFile';
  
  export default defineComponent({
    name: 'Upload',
    emits: ['on-success', 'on-error'],
    setup(_props, { emit }) {
      function beforeRead(file:any): any {
        console.log('之前')
        return new Promise((resolve) => {
          // eslint-disable-next-line no-new
          new Compressor(file, {
            success: (result) => {
              resolve(result);
            },
            error: (error) => {
              console.error(`[Compressor error]`, error);
              emit('on-error', error);
            },
          });
        });
      }
      function afterRead(file:any) {
        console.log('执行')
        const formData = new FormData();
        formData.append('upfile', file.file);
  
       
        
        API_DFS.dfsUploadFile(formData)
          .then((res:any) => {
            if (res.data.url) {
              emit('on-success', res);
            } else {
              
              emit('on-error', res);
            }
          })
          .catch((error:any) => {
            emit('on-error', error);
          });
      }
  
      return {
        beforeRead,
        afterRead,
      };
    },
  });
  </script>
  
  

  

代码块

代码块