@lambo-design/upload-file 1.0.0-beta.3 → 1.0.0-beta.31

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/upload-file",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.31",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -9,11 +9,18 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "@lambo-design/core": "^4.7.1-beta",
-    "@lambo-design/shared": "^1.0.0-beta",
+  "devDependencies": {
     "axios": "^0.24.0",
-    "axios-cache-plugin": "^0.1.0"
+    "axios-cache-plugin": "^0.1.0",
+    "@lambo-design/core": "^4.7.1-beta.162",
+    "@lambo-design/shared": "^1.0.0-beta.267"
   },
-  "scripts": {}
+  "scripts": {
+    "release-upload-file": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
 }

package/src/index.vue

@@ -1,31 +1,37 @@
 <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 class="upload-btn-box" v-if="!disabled">
+      <slot>
+        <Button :size="buttonSize" icon="md-add" type="primary" :loading="loading"
+                @click="UploadFile()" ghost v-if="uploadBtn">
+          <span v-if="!loading">上传附件</span>
+          <span v-else>正在上传...</span>
+        </Button>
+        <a v-if="!uploadBtn" @click="UploadFile()">
+          <Icon type="md-add"></Icon>
+          上传附件
+        </a>
+        <span style="margin-left: 10px; color: #ed4014">
+          {{ descInfo }}
+        </span>
+      </slot>
     </div>
-    <input type="file" :disabled="false" ref="uploadInput" style="position:absolute; clip:rect(0 0 0 0);"
+    <input type="file" :disabled="disabled" ref="uploadInput" style="position:absolute; clip:rect(0 0 0 0);display: none"
            :multiple="multiple"
            :accept="accept"
            @change="readFile($event, 1)"/>
-      <div class="upload-file-list" v-if="showFileList && resultList.length > 0">
+    <div class="upload-file-list" v-if="showFileList && resultList.length > 0">
       <List border size="small">
-        <ListItem v-for="item in resultList" :key="item.fileCode">
+        <ListItem v-for="item in resultList" :key="item.fileId ? item.fileId : 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 :href="item.fileUrl ? item.fileUrl : downloadUrl + item.fileId ? item.fileId : item.fileCode">
+              {{ 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>
+            <Button v-if="showPreview" @click="previewFile(item)" type="text">预览</Button>
+            <Button v-if="!disabled" @click="deleteFile(item.fileId ? item.fileId : item.fileCode)" type="text">删除</Button>
           </div>
         </ListItem>
       </List>
@@ -34,8 +40,9 @@
 </template>
 
 <script>
-import axios from 'axios';
-import {formatterSizeUnit} from "@lambo-design/shared/utils/date";
+import ajax from "@lambo-design/shared/utils/ajax";
+import config from "@lambo-design/shared/config/config";
+import {formatterSizeUnit} from "@lambo-design/shared/utils/file";
 
 export default {
   components: {},
@@ -44,12 +51,18 @@ export default {
     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"
+      default: "application/pdf,text/plain,application/msword,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip,.rar"
     },
     fileSuffix: {
       type: String,
       required: false,
-      default: "pdf|doc|docx|txt|xls|xlsx|jpg|jpeg|png|gif"
+      default: "pdf|doc|docx|txt|xls|xlsx|zip|rar"
+    },
+    //描述信息
+    descInfo: {
+      type: String,
+      required: false,
+      default: ""
     },
     //标题
     title: {
@@ -62,11 +75,28 @@ export default {
       type: Boolean,
       default: false
     },
+    //是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    //上传图片最大限制 单位：MB
+    fileMaxSize: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    //限制上传数量
+    limitFileNum: {
+      type: Number,
+      required: false,
+      default: 0
+    },
     //是否按钮形式
     uploadBtn: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     //是否展示文件列表
     showFileList: {
@@ -74,12 +104,26 @@ export default {
       required: false,
       default: true
     },
+    //是否显示预览文件按钮
+    showPreview: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     //其他需要传递的参数
     otherParam: {//其他需要传递的参数
       type: String,
       required: false,
       default: ""
     },
+    //文件编码列表
+    fileIdList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    },
     //文件列表
     fileList: {
       type: Array,
@@ -91,17 +135,27 @@ export default {
     //上传文件上下文
     ossServerContext: {
       type: String,
-      default: ''
+      default: config.ossServerContext
     },
     //上传文件Url
-    ossFilePutUrl:{
+    ossFilePutUrl: {
       type: String,
       default: "/oss/file/put"
     },
     //获取文件url
-    ossFileGetUrl:{
-      type:String,
-      default:"/oss/file/get/"
+    ossFileGetUrl: {
+      type: String,
+      default: "/oss/file/get/"
+    },
+    //文件预览所需文件流服务host
+    fileOnlinePreviewHost: {
+      type: String,
+      default: "http://pub-manage-server:8080"
+    },
+    //预览文件url
+    ossFilePreviewUrl: {
+      type: String,
+      default: "/anon/oss/file/getObjToOutputStream/"
     }
   },
 
@@ -112,7 +166,7 @@ export default {
       loading: false,
       attachmentFile: {
         // fileUrl:"",
-        fileCode: "",
+        fileId: "",
         fileType: "",
         fileName: "",
         size: ""
@@ -120,21 +174,41 @@ export default {
       resultList: []
     }
   },
+  computed: {
+    downloadUrl: function () {
+      return this.ossServerContext + this.ossFileGetUrl;
+    },
+    dynamicFileTypeAlertMessage() {
+      // 使用 fileSuffix 动态生成提示信息
+      const fileExtensions = this.fileSuffix.split('|').join('，');
+      return `文件类型必须是 ${fileExtensions} 中的一种`;
+    }
+  },
   methods: {
     UploadFile: function () {
-      this.$refs.uploadInput.click();
+      if (this.limitFileNum !== 0 && this.resultList.length >= this.limitFileNum) {
+        alert('最多只能上传' + this.limitFileNum + '个文件');
+      } else {
+        this.$refs.uploadInput.click();
+      }
     },
     readFile: function (e, num) {
       let self = this;
       //读取文件
-      // var file = e.target.files[0];
+      self.loading = true;
       for (let file of e.target.files) {
-        // fileSuffix
-        var reg = new RegExp("\.(" + this.fileSuffix + ")$", "i");
+        const reg = new RegExp("\.(" + this.fileSuffix + ")$", "i");
         if (!reg.test(file.name)) {
-          alert('文件类型必须是doc，docx，txt，xls，xlsx，jpg，jpeg，png中的一种');
+          alert(self.dynamicFileTypeAlertMessage);
+          self.$refs.uploadInput.value = null; // 清空文件输入框
+          self.loading = false;
           return false;
         } else {
+          if (this.fileMaxSize && file.size > this.fileMaxSize * 1024 * 1024) {
+            self.$Message.error("上传文件大小需要小于" + this.fileMaxSize + "MB");
+            self.loading = false;
+            return
+          }
           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);
@@ -144,42 +218,39 @@ export default {
           }
         }
         self.attachmentFile.fileType = self.attachmentFile.fileName.name.substring(self.attachmentFile.fileName.name.lastIndexOf(".") + 1);
-
       }
-      self.loading = true;
-      self.loadtoServer();
+      self.doUpload();
     },
-    loadtoServer: function () {
-      var self = this;
-      let inputDOM = this.$refs.uploadInput;
-      var afile = inputDOM.files;
-      if (afile.size == 0) {
+    doUpload: function () {
+      let self = this;
+      const allFile = this.$refs.uploadInput.files;
+      if (allFile.size === 0) {
         alert("不能传入空文件");
+        self.loading = false;
         return false;
       }
       let formData = new FormData();
-      for (let file of afile) {
+      for (let file of allFile) {
         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;
+      const uploadUrl = self.ossServerContext + self.ossFilePutUrl;
+      const downloadUrl = self.ossServerContext + self.ossFileGetUrl;
+      ajax.post(uploadUrl, formData, {payload: true}).then(response => {
+        if (response.data.code === 1) {
+          const result = response.data.data;
           self.loading = false;
           if (result.length >= 1) {
             result.forEach(item => {
-              let tmp = {
+              const tmp = {
                 fileUrl: downloadUrl + item.fileId,
-                fileCode: item.fileId,
+                fileId: 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);
             });
@@ -199,12 +270,35 @@ export default {
         self.$refs.uploadInput.value = null
       });
     },
-    deleteFile: function (fileCode) {
-      if (fileCode) {
-        var result = [];
-        var deletes = []
+
+    encode64(value) {
+      let typeValue = typeof value;
+      if (typeValue === 'string' || typeValue === 'number') {
+        return window.btoa(
+          window.encodeURIComponent(value)
+            .replace(/%([0-9A-F]{2})/g,
+              function toSolidBytes(match, p1) {
+                return String.fromCharCode('0x' + p1);
+              }));
+      } else {
+        return value;
+      }
+    },
+    previewFile: function (item) {
+      if (item.fileId || item.fileCode) {
+        const url = this.fileOnlinePreviewHost + this.ossServerContext + this.ossFilePreviewUrl + item.fileId ? item.fileId : item.fileCode + "?fullfilename=" + item.fileName + "." + item.fileType;
+        window.open(config.fileOnlinePreviewContext + '/onlinePreview?url=' + encodeURIComponent(this.encode64(url)));
+      }
+    },
+    deleteFile: function (fileId) {
+      if (fileId) {
+        let result = [];
+        let deletes = []
         this.resultList.forEach(item => {
-          if (item.fileCode != fileCode) {
+          if (!item.fileId) {
+            item.fileId = item.fileCode;
+          }
+          if (item.fileId !== fileId) {
             result.push(item);
           } else {
             deletes.push(item)
@@ -217,13 +311,57 @@ export default {
           this.$emit("upload-result", this.resultList, deletes);
         }
       }
+    },
+    initFileList: function (value) {
+      if (this.resultList.length === 0) {
+        let requests = []
+        for (const fileId of value) {
+          requests.push(ajax.get(config.upmsServerContext + "/oss/file/getMetaData/" + fileId))
+        }
+        Promise.all(requests).then((response) => {
+          response.forEach(item => {
+            this.resultList.push({
+              fileId: item.data.data.fileId,
+              fileUrl: this.ossServerContext + this.ossFileGetUrl + item.data.data.fileId,
+              fileName: item.data.data.fileName,
+              fileType: item.data.data.fileName.substring(item.data.data.fileName.lastIndexOf(".") + 1),
+              size: item.data.data.length,
+              showSize: formatterSizeUnit(item.data.data.length),
+              otherParam: this.otherParam
+            })
+          })
+        });
+      }
+    },
+    arraysEqual(arr1, arr2) {
+      if (arr1.length !== arr2.length) return false;
+      for (let i = 0; i < arr1.length; i++) {
+        if (arr1[i] !== arr2[i]) return false;
+      }
+      return true;
     }
   },
   watch: {
-    fileList: function (value) {
-      var data = this.fileList;
-      this.resultList = data;
+    fileList: {
+      handler: function (value) {
+        this.resultList = this.fileList
+      },
+      immediate:true,
+      deep: true
+    },
+    fileIdList: {
+      handler: function (newValue, oldValue) {
+        if (newValue.length > 0 && !this.arraysEqual(newValue, oldValue)) {
+          this.initFileList(newValue)
+        } else if (newValue.length === 0) {
+          this.resultList = []
+        }
+      },
+      deep: true
     }
+  },
+  mounted() {
+    this.initFileList(this.fileIdList)
   }
 }
 </script>