v3文件上传

//下载axios
npm i axios
//在main.js挂载到全局
import axios from "axios";
const app = createApp(App);
app.config.globalProperties.$axios = axios;

//页面使用
<template>
<input type="file" @change="updataFile" />
</template>
<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();//获取原型
const Axios = proxy.$axios;//Axios就是挂在的原型
const updataFile = (e) => {
let file = e.target.files[0];//拿到上传的file
let param = new FormData();//创建form对象
param.append("file", file);//为创建的form对象增加上传的文件
param.append("id", "1");//如果需要上传其他字段，在这里增加
let config = { headers: { "Content-Type": "multipart/form-data" } }//修改请求头
let url = "你的上传地址";
Axios.post(url, param, config).then((res) => {
console.log(res, "res");
});
}
</script>

 

//图片转换为base64文件流

export function base64ToFile(urlData, fileName) {

  //debugger

    let arr = urlData.split(',');

    let mime = arr[0].match(/:(.*?);/)[1];

    let suffix = mime.split('/')[1]

    let bytes = atob(arr[1]); // 解码base64

    let n = bytes.length

    let ia = new Uint8Array(n);

    while (n--) {

        ia[n] = bytes.charCodeAt(n);

    }

    let fil = new File([ia], `${fileName}.${suffix}`, { type: mime });

    return fil

}