使用vue二次封裝elementui中upload組件

`<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" />
相關文章
相關標籤/搜索