@lambo-design/upload-file 1.0.0-beta.1

package/index.js

@@ -0,0 +1,2 @@
+import LamboUploadFile from './src/index.vue'
+export default LamboUploadFile

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@lambo-design/upload-file",
+  "version": "1.0.0-beta.1",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "axios": "^0.24.0",
+    "axios-cache-plugin": "^0.1.0",
+    "@lambo-design/core": "4.7.1-beta.36",
+    "@lambo-design/shared": "1.0.0-beta.15"
+  },
+  "scripts": {}
+}

package/src/index.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="upload-file-box">
+    <div class="upload-btn-box">
+      <Button :size="buttonSize" icon="md-cloud-upload" type="primary" :loading="loading"
+              @click="UploadFile()" ghost v-if="uploadBtn">
+        <span v-if="!loading">{{title}}</span>
+        <span v-else>Loading...</span>
+      </Button>
+      <a v-if="!uploadBtn" @click="UploadFile()">
+        <Icon type="md-add"></Icon>
+        上传附件
+      </a>
+    </div>
+    <input type="file" :disabled="false" ref="uploadInput" style="position:absolute; clip:rect(0 0 0 0);"
+           :multiple="multiple"
+           :accept="accept"
+           @change="readFile($event, 1)"/>
+      <div class="upload-file-list" v-if="showFileList && resultList.length > 0">
+      <List border size="small">
+        <ListItem v-for="item in resultList" :key="item.fileCode">
+          <div span="21">
+            <a :href="item.fileUrl">
+              {{item.fileName}}
+              <span class="size" style="margin-left: 5px" v-if="item.showSize">({{item.showSize}})</span>
+            </a>
+          </div>
+          <div span="3" style="text-align: right">
+            <Button @click="deleteFile(item.fileCode)" type="text">删除</Button>
+          </div>
+        </ListItem>
+      </List>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import {formatterSizeUnit} from "@lambo-design/shared/utils/date";
+
+export default {
+  components: {},
+  name: "LamboUploadFile",
+  props: {
+    accept: {//txt,word,excel
+      type: String,
+      required: false,
+      default: "text/plain,application/msword,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    },
+    fileSuffix: {
+      type: String,
+      required: false,
+      default: "pdf|doc|docx|txt|xls|xlsx|jpg|jpeg|png|gif"
+    },
+    //标题
+    title: {
+      type: String,
+      required: false,
+      default: "上传"
+    },
+    //是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    //是否按钮形式
+    uploadBtn: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    //是否展示文件列表
+    showFileList: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    //其他需要传递的参数
+    otherParam: {//其他需要传递的参数
+      type: String,
+      required: false,
+      default: ""
+    },
+    //文件列表
+    fileList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    },
+    //上传文件上下文
+    ossServerContext: {
+      type: String,
+      default: ''
+    },
+    //上传文件Url
+    ossFilePutUrl:{
+      type: String,
+      default: "/oss/file/put"
+    },
+    //获取文件url
+    ossFileGetUrl:{
+      type:String,
+      default:"/oss/file/get/"
+    }
+  },
+
+  data() {
+    return {
+      buttonSize: 'default',
+      addFile: "",
+      loading: false,
+      attachmentFile: {
+        // fileUrl:"",
+        fileCode: "",
+        fileType: "",
+        fileName: "",
+        size: ""
+      },
+      resultList: []
+    }
+  },
+  methods: {
+    UploadFile: function () {
+      this.$refs.uploadInput.click();
+    },
+    readFile: function (e, num) {
+      let self = this;
+      //读取文件
+      // var file = e.target.files[0];
+      for (let file of e.target.files) {
+        // fileSuffix
+        var reg = new RegExp("\.(" + this.fileSuffix + ")$", "i");
+        if (!reg.test(file.name)) {
+          alert('文件类型必须是doc，docx，txt，xls，xlsx，jpg，jpeg，png中的一种');
+          return false;
+        } else {
+          self.attachmentFile.fileName = file;
+          if (self.attachmentFile.fileName.name.indexOf("/") > 0) {
+            self.attachmentFile.fileName = self.attachmentFile.fileName.name.substring(self.attachmentFile.fileName.name.lastIndexOf("/") + 1);
+          }
+          if (self.attachmentFile.fileName.name.indexOf("\\") > 0) {
+            self.attachmentFile.fileName = self.attachmentFile.fileName.name.substring(self.attachmentFile.fileName.name.lastIndexOf("\\") + 1);
+          }
+        }
+        self.attachmentFile.fileType = self.attachmentFile.fileName.name.substring(self.attachmentFile.fileName.name.lastIndexOf(".") + 1);
+
+      }
+      self.loading = true;
+      self.loadtoServer();
+    },
+    loadtoServer: function () {
+      var self = this;
+      let inputDOM = this.$refs.uploadInput;
+      var afile = inputDOM.files;
+      if (afile.size == 0) {
+        alert("不能传入空文件");
+        return false;
+      }
+      let formData = new FormData();
+      for (let file of afile) {
+        formData.append('file', file);
+      }
+      let resultList = [];
+      let uploadUrl = self.ossServerContext + self.ossFilePutUrl;
+      let downloadUrl = self.ossServerContext + self.ossFileGetUrl;
+      axios.post(uploadUrl, formData).then(response => {
+        if (response.data.code == "1") {
+          var result = response.data.data;
+          self.loading = false;
+          if (result.length >= 1) {
+            result.forEach(item => {
+              let tmp = {
+                fileUrl: downloadUrl + item.fileId,
+                fileCode: item.fileId,
+                fileName: item.fileName,
+                fileType: item.fileName.substring(item.fileName.lastIndexOf(".") + 1),
+                size: item.length,
+                showSize: formatterSizeUnit(item.length),
+                otherParam: self.otherParam
+              };
+
+              resultList.push(tmp);
+              self.resultList.push(tmp);
+            });
+            if (this.showFileList) {
+              self.$emit("upload-result", self.resultList);
+            } else {
+              if (self.multiple) {
+                self.$emit("upload-result", resultList);
+              } else {
+                self.$emit("upload-result", resultList[0]);
+              }
+            }
+          } else {
+            self.$emit("upload-result", null);
+          }
+        }
+        self.$refs.uploadInput.value = null
+      });
+    },
+    deleteFile: function (fileCode) {
+      if (fileCode) {
+        var result = [];
+        var deletes = []
+        this.resultList.forEach(item => {
+          if (item.fileCode != fileCode) {
+            result.push(item);
+          } else {
+            deletes.push(item)
+          }
+        });
+        this.resultList = result;
+        if (this.multiple) {
+          this.$emit("upload-result", this.resultList, deletes);
+        } else {
+          this.$emit("upload-result", this.resultList, deletes);
+        }
+      }
+    }
+  },
+  watch: {
+    fileList: function (value) {
+      var data = this.fileList;
+      this.resultList = data;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "styles/css/index.less";
+</style>

package/src/styles/index.less

@@ -0,0 +1,3 @@
+.upload-btn-box{
+  padding-bottom:10px
+}