标签：el const formData upload value file vue3 ElMessage data
<template>
<el-upload
class="avatar-uploader"
action="#"
:headers="headers"
:http-request="uploadAction"
:on-change="onchange"
:file-list="fileListCopy.data"
ref="upload"
:multiple="true"
:show-file-list="false"
>
<el-button>导入回路</el-button>
</el-upload>
</template>
<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
const urlValue = ref("你的接口地址");
const fileContent = ref(null);// 记录file文件流内容
const headers = reactive({ "Content-Type": "multipart/form-data" });//请求头
const cns = getCurrentInstance();
const globObj = cns.appContext.config.globalProperties;
const fileListCopy = reactive({
data: [],
});
const onchange = (file, fileList) => {
fileContent.value = file; // 记录file文件流内容
};
// 上传请求
const uploadAction = () => {
let formData = new FormData();
formData.append("file", fileContent.value.raw);
const url = urlValue.value;
globObj
.$axios({
url: url,
method: "post",
transformRequest: [
function (data, headers) {
return data;
},
],
headers: { "Content-Type": "multipart/form-data" },
data: formData,
timeout: 300000,
})
.then((res) => {
ElMessage.success("导入" + btnValue.value + "成功");
})
.catch((err) => {
ElMessage.warning("导入" + btnValue.value + "失败");
});
};
onMounted(() => {});
</script>
标签：el,
const,
formData,
upload,
value,
file,
vue3,
ElMessage,
data
From： https://blog.csdn.net/weixin_50387010/article/details/142058784