上传组件 el-upload
<el-upload
:on-success="uploadSuccess"
:on-error="handleErr"
:on-remove="handleRemove"
:action="uploadAction"
:data="fileData"
:on-preview="handlePreview"
style="margin: 0 10px"
@mouseover.native="addTitle"
:file-list="fileList"
>
<el-button
size="small"
icon="el-icon-upload"
type="primary"
>上传回执单</el-button
>
</el-upload>
// 上传成功
uploadSuccess(res, fileList) {
let attachments = [];
attachments = deepClone(this.ruleForm.attachments);
attachments.push({
id: res.id,
url: res.path,
name: res.name,
});
this.ruleForm.attachments = attachments;
// this.ruleForm.localPath = attachments;
},
// 删除文件
fileRemove(file) {
// console.log("这里是附件删除的内容===", file);
if (
this.formDate &&
!(JSON.stringify(this.formDate) === "{}") &&
file.tipsInfo == this.sucessText
) {
this.deleteAttachments.push(file);
}
this.ruleForm.attachments = this.ruleForm.attachments.filter(
(item) => item.id !== file.id
);
// this.ruleForm.localPath = "";
// this.ruleForm.downloadPath = "";
},
//根据uuid获取附近
fetchByType(item) {
fetchByType({ value: item, type: "uuid" }).then((res) => {
if (res.message == "Success") {
if (typeof res.result != "undefined" && res.result.length > 0) {
console.log("upload", res);
this.fileList = [];
res.result.forEach((element) => {
var file_data = {
name: element.fileName,
url: element.filePath,
id: element.id,
uuid: element.fileGroupUuid,
};
this.fileList.push(file_data);
});
if (this.fileList.length == res.result.length) {
this.upload_count = this.fileList.length;
this.loading = false;
}
} else {
// this.loading = false;
}
} else {
// this.loading = false;
}
});
},
upload组件代码
<template>
<div>
<el-upload
v-if="!loading"
class="upload-demo"
:disabled="disabled"
:action="url"
:limit="limit"
:on-success="handelSuccess"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-preview="handlePreview"
:on-exceed="handleExceed"
:before-upload="beforeUpload"
multiple
:headers="headers"
:file-list="fileList"
:data="fileData"
:accept="file_type"
>
<el-button
v-if="!disabled ? upload_count < limit : false"
:icon="icon"
size="small"
type="primary"
>
<span v-if="!icon">点击上传</span>
</el-button>
<div slot="tip" v-if='showTip' class="el-upload__tip">
{{ tip }}
</div>
</el-upload>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { fetchByType, getUrlByPath, remove } from "@/api/storage";
export default {
data () {
return {
cityOptions:this.fileList,
cities: this.fileList,
fileList: [],
url: process.env.MANAGEER_API + "/storage",
headers: {
Authorization: "Bearer " + getToken(),
},
upload_count: 0,
loading: true,
};
},
props: {
disabled: {
type: Boolean,
default: false,
},
showTip:{
type: Boolean,
default: false,
},
fileName: {
type: String,
default: null,
},
savePath: {
type: String,
default: null,
},
file_size: {
type: Number,
default: 50,
},
file_type: {
type: String,
default: "*",
},
uuid: {
type: String,
default: null,
},
limit: {
type: Number,
default: 1,
},
type: {
type: String,
default: "uuid",
},
value: {
type: String,
default: null,
},
tip: {
type: String,
default: "只能上传jpg/png文件,且不超过500kb",
},
guarded: {
type: String,
default: "white",
},
icon: {
type: String,
default: "",
},
status: {
type: Number,
default: 0,
},
isCallDelFileInterface: {
type: Boolean,
default: true,
},
paramFileList: {
type: Array,
default: () => []
}
},
watch: {
value (newData, oldData) {
if (newData && oldData == null) {
this.filesByType()
}
},
paramFileList (newData, oldData){
console.log('upload==',newData)
this.fileList = newData || []
}
},
created () {
if (this.value) {
this.filesByType();
}
this.fileList = this.paramFileList || []
this.loading = false
console.log('upload==',this.paramFileList)
},
computed: {
fileData () {
var data = {};
if (this.fileName) {
data.name = this.fileName;
}
if (this.savePath) {
data.path = this.savePath;
}
if (this.uuid) {
data.uuid = this.uuid;
}
if (this.status === 1) {
data.status = this.status;
}
return data;
},
},
methods: {
filesByType () {
this.loading = true;
fetchByType({ value: this.value, type: this.type }).then((res) => {
if (res.message == "Success") {
if (typeof res.result != "undefined" && res.result.length > 0) {
res.result.forEach((element) => {
var file_data = {
name: element.fileName,
url: element.filePath,
id: element.id,
uuid: element.fileGroupUuid,
};
this.fileList.push(file_data);
});
if (this.fileList.length == res.result.length) {
this.upload_count = this.fileList.length;
this.loading = false;
}
} else {
this.loading = false;
}
}
});
},
handleRemove (file, fileList) {
if (file.status == "success") {
if (this.isCallDelFileInterface) {
if (typeof file.response != "undefined") {
file.id = file.response.result.id;
}
remove(file.id).then((res) => {
if (res.message == "Success") {
this.upload_count--;
this.$emit("fileRemove", file);
this.$message({
type: "success",
message: "文件移除成功!",
});
}
});
} else {
this.upload_count--;
this.$emit("fileRemove", file);
}
} else {
this.upload_count--;
}
},
handlePreview (file) {
console.log('aaa==',file)
if (typeof file.response != "undefined") {
file.url = file.response.result.path;
}
this.$confirm("是否需要下载文件?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
getUrlByPath({ path: file.url }).then((res) => {
console.log('aaa')
console.log('res==',res)
if (res.message == "Success") {
window.open(res.result, "_blank");
this.$message({
type: "success",
message: "文件下载成功!",
});
} else {
this.$message({
type: "error",
message: "文件下载失败,文件没有找到!",
});
}
});
});
},
beforeUpload (file) {
if (this.limit == this.upload_count) {
return false;
}
var file_ext = file.name.substring(file.name.lastIndexOf("."));
var ext_valid = true;
var file_size_valid = file.size / 1024 / 1024 < parseInt(this.file_size);
if (this.file_type != "*") {
var file_type_arr = this.file_type.split(",");
if (file_type_arr.length > 0) {
if (this.guarded == "white") {
if (!this.in_array(file_ext, file_type_arr)) {
this.$message({
message: "上传文件仅支持 " + file_type_arr.join("、") + "格式!",
type: "warning",
});
ext_valid = false;
}
} else {
if (this.in_array(file_ext, file_type_arr)) {
this.$message({
message: "上传文件不支持 " + file_type_arr.join("、") + "格式!",
type: "warning",
});
ext_valid = false;
}
}
}
}
if (!file_size_valid) {
this.$message({
message: "上传文件最大支持 " + this.file_size + "M!",
type: "warning",
});
}
return file_size_valid && ext_valid;
},
in_array (search, array) {
for (var i in array) {
if (array[i] == search) {
return true;
}
}
return false;
},
handleExceed (files, fileList) {
if (files.length > this.limit) {
this.$message.warning(
`当前限制选择 ${this.limit} 个文件,本次选择了 ${files.length
} 个文件,共选择了 ${files.length + fileList.length} 个文件`
);
} else {
this.$message.warning(
`当前限制选择 ${this.limit} 个文件,请先移除文件后,重新上传`
);
}
},
beforeRemove (file, fileList) {
if (file.status == "success") {
return this.$confirm(`确定移除 ${file.name}?`);
}
},
handelSuccess (response, file, fileList) {
if (response.message == "Success") {
this.upload_count++;
this.$emit("uploadSuccess", response.result,fileList);
} else {
this.$message.error("文件上传失败");
}
},
},
};
</script>
版权声明:本文由Web学习之路发布,如需转载请注明出处。