`<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" />

弱鸡的前端程序员
33 声望3 粉丝