`<template>
<div>
<el-upload
class="upload-demo"
action="/api/v1/upload_oss"
:headers="reqHeaders"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeJSONUpload"
:data="{type:2,state:'public'}"
multiple
:limit="3"
:name="'image'"
:on-exceed="handleExceed"
:on-success="handleJSONSuccess"
:file-list="fileList"
>
<el-button
size="small"
type="primary"
>点击上传</el-button>
<div
slot="tip"
class="el-upload__tip"
>只能上传JSON文件,且不超过5M</div>
</el-upload>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
name: "smUpload",
model: {
prop: "value",
event: "handleJSONSuccess"
},
props: {
value: Array
},
data() {
return {
fileList: [],
reqHeaders: {}
};
},
methods: {
handleRemove(file, fileList) {
// // console.log(file, fileList);
},
handlePreview(file) {
// // console.log(file);
},
beforeJSONUpload(file) {
const isJPG = file.type.includes("json");
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isJPG) {
this.$message.error("配置文件只能是JSON格式!");
}
if (!isLt2M) {
this.$message.error("上传配置文件大小不能超过 5MB!");
}
return isJPG && isLt2M;
},
handleJSONSuccess(res, file, fileList) {
this.$emit("handleJSONSuccess", fileList);
},
handleExceed(files, fileList) {
this.$message.warning(
当前限制选择 1 个文件,本次选择了 ${
files.length
} 个文件,共选择了 ${files.length + fileList.length} 个文件
);
},
beforeRemove(file, fileList) {
return this.$confirm(确定移除 ${file.name}?);
}
},
mounted: function() {
this.reqHeaders["Authorization"] = "Bearer " + getToken();
}
};
</script>
<style lang="scss" scoped>
</style>
`
使用时
<smUpload v-model="otherConfigs[item.key].file_path" />
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。