<template>
<el-upload
class="upload-demo"
:accept="fileType.join(',')"
:disabled="disabled"
:action="action"
:headers="headers"
:show-file-list="showFileList"
:multiple="multiple"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-success="handleAvatarSuccess"
:http-request="customUpload"
>
<slot name="main"> </slot>
</el-upload>
</template>
<script>
import { getCookie } from "@/utils/cookie";
import axios from "axios";
export default {
props: {
fileType: {
type: Array,
default: () => [],
},
multiple: {
type: Boolean,
default: () => false,
},
showFileList: {
type: Boolean,
default: () => false,
},
disabled: {
type: Boolean,
default: () => false,
},
fileList: {
type: Array,
default: () => [],
},
prefix: {
type: String,
default: () => "",
},
},
data() {
return {
action: process.env.VUE_APP_API + "/casApi/oss/uploadFileNew",
headers: {
Authorization: "Bearer " + getCookie("electronic_token_enterprise"),
isBackSys: true,
},
fileData: [],
};
},
watch: {
fileList:{
handler(newVal){
this.fileData = [...newVal];
},
immediate:true,
deep:true
}
},
methods: {
customUpload(options) {
const formData = new FormData();
// 添加额外的字段
formData.append("prefix", this.prefix); // 添加 type 字段
formData.append("file", options.file); // 添加文件字段
axios
.post(this.action, formData, {
headers: {
Authorization: "Bearer " + getCookie("electronic_token_enterprise"),
},
}) // 上传块数据
.then((res) => {
options.onSuccess(res.data)
})
.catch((err) => {
reject(err);
});
},
// 触发上传
handleUpload() {
this.$refs.upload.submit();
},
handlePreview(file) {
console.log(file, "aaaaaaaaaaaa");
if (file.url) {
window.open(file.url);
// this.downLoad(file.url)
} else {
window.open(file.response.data[0]);
// this.downLoad(file.response.data[0]);
}
},
downLoad(url) {
var a = document.createElement("a");
a.href = url;
a.target = "_blank";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
},
handleRemove(file, fileList) {
console.log(file, fileList);
this.fileData.splice(
this.fileData.findIndex((i) => i.uid === file.uid),
1
);
this.$emit("uploadFile", this.fileData);
},
handleAvatarSuccess(res, file, fileList) {
console.log(res, file, fileList, "aaaaaaaaaa");
if (res.code == 0) {
if (this.multiple) {
this.fileData.push({
url: res.data[0],
name: file.name,
uid: file.uid,
});
console.log(this.fileData, "fileData");
this.$emit("uploadFile", this.fileData);
} else {
this.$emit("uploadFile", res.data[0], file);
}
this.$emit("changeLoading", false);
} else {
this.$message.error("上传失败,原因:" + res.retMsg);
this.$emit("changeLoading", false);
}
},
beforeAvatarUpload(file) {
let isFileType = true;
if (this.fileType.length) {
let type = file.name.length
? file.name.substring(file.name.lastIndexOf(".") + 1)
: "";
console.log(this.fileType, type);
isFileType = this.fileType.includes("." + type);
if (!isFileType) {
this.$message.error("上传文件类型错误");
}
}
console.log(isFileType);
if (isFileType) {
this.$emit("changeLoading", true);
// this.customUpload(file)
}
return isFileType;
},
},
mounted() {
this.fileData = [...this.fileList];
console.log(this.fileData, "sssssssssssssss");
// this.fileList = JSON.parse(
// `[{"url":"http://8.130.146.219:9000/sbxq/project/20240927/vwxf1p89plbz_no-zhaozf.xlsx","name":"plbz_no-zhaozf.xlsx"},{"url":"http://8.130.146.219:9000/sbxq/project/20240927/5hhtd9s2ssssssssss.xlsx","name":"ssssssssss.xlsx"}]`
// );
// this.fileData=JSON.parse(
// `[{"url":"http://8.130.146.219:9000/sbxq/project/20240927/vwxf1p89plbz_no-zhaozf.xlsx","name":"plbz_no-zhaozf.xlsx"},{"url":"http://8.130.146.219:9000/sbxq/project/20240927/5hhtd9s2ssssssssss.xlsx","name":"ssssssssss.xlsx"}]`
// );
},
};
</script>
<style lang="scss" scoped>
.upload-demo {
display: inline-block;
/deep/.el-upload {
width: 100%;
text-align: left;
}
}
/deep/.el-upload-list__item.is-success.focusing .el-icon-close-tip {
display: none !important;
}
</style>
el-upload上传文件时添加参数
该文章已生成可运行项目,
本文章已经生成可运行项目
815

被折叠的 条评论
为什么被折叠?



