VueJs使用axios上傳文件

html

<input type="file" id="fileUploadEle" ref="fileUploadEle" style="display:none;" accept=".png, .jpg"
                    @change="selectFile" />
                <label for="fileUploadEle">
                    <el-button type="primary" @click="openFileDialog">上傳頭像</el-button>
                </label>

js

let fileUploadEle = ref<object>({});

let upFile: any = null;

function openFileDialog() {
    // document.getElementById('fileUploadEle').click();
    (fileUploadEle.value as HTMLElement).click();
}

function selectFile(e: any) {
    let file = e.target.files[0];
    upFile = file;
}
//上傳2，點擊按鈕上傳。
const uploadFiles = async () => {
    await uploadFilesReq(upFile).then((res) => {
        console.log(res);
        if (res.status == 200 && res.data.errorCode == '0') {
            // ElMessage({ showClose: true, message: "操作成功", grouping: true, type: 'success' });
            form.sysUserAvatar = res.data.data[0];
        } else {
            ElMessage({ showClose: true, message: "圖片上傳失敗：" + res.data.message, grouping: true, type: 'error' });
        }
    }).catch(err => {
        ElMessage({ showClose: true, message: "圖片上傳錯誤：" + JSON.stringify(err), grouping: true, type: 'error' });
    });
}

common

import { getCookie } from '@/common/cookie'
import Axios from "axios"
// import pinia from '@/stores/store'
// import { useSystemDataStore } from '@/stores/index'
// SystemDataStore 可以在本文件中隨意使用
// const SystemDataStore = useSystemDataStore(pinia);
let domainUrl = import.meta.env.VITE_ApiDomain;
//上傳2，點擊按鈕上傳。
export async function uploadFilesReq(upFile: any) {
    /* eslint-disable no-undef */
    let param = new FormData(); // 創建form對象
    param.append("file", upFile); // 通過append向form對象添加數據
    // console.log(param.get("file")); // FormData私有類對象，訪問不到，可以通過get判斷值是否傳進去
    let config = {
        headers: { "Content-Type": "multipart/form-data","Authorization": "","Access-Control-Allow-Origin-Type":"*"},
    };
    let token = getCookie('XSRF-TOKEN');
    if (token != undefined && token != '' && token != null) {
        // let each request carry token
        // ['X-Token'] is a custom headers key
        // please modify it according to the actual situation
        config.headers['Authorization'] = 'Bearer ' + token;
    }
    // 添加請求頭 domainUrl
    return await Axios.post(domainUrl + "Upload/UploadFiles", param, config);
    // return await Axios.post(SystemDataStore.apiDomain + "Upload/UploadFiles", param, config);
}