`<template>
<div>css
<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>json
<script>
import { getToken } from "@/utils/auth";api
export default {
name: "smUpload",
model: {this
prop: "value", event: "handleJSONSuccess"
},
props: {code
value: Array
},
data() {ip
return { fileList: [], reqHeaders: {} };
},
methods: {rem
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() {get
this.reqHeaders["Authorization"] = "Bearer " + getToken();
}
};
</script>scss
<style lang="scss" scoped>
</style>
`it
使用時
<smUpload v-model="otherConfigs[item.key].file_path" />