@lambo-design/upload-file 1.0.0-beta.2 → 1.0.0-beta.21

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.2",
+  "version": "1.0.0-beta.21",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -9,11 +9,18 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
+  "devDependencies": {
     "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"
+    "@lambo-design/shared": "^1.0.0-beta.206",
+    "@lambo-design/core": "^4.7.1-beta.139"
   },
-  "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,30 +1,33 @@
 <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>
+      <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>
+      </slot>
     </div>
-    <input type="file" :disabled="false" ref="uploadInput" style="position:absolute; clip:rect(0 0 0 0);"
+    <input type="file" :disabled="false" 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">
           <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.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 v-if="showPreview" @click="previewFile(item)" type="text">预览</Button>
             <Button @click="deleteFile(item.fileCode)" type="text">删除</Button>
           </div>
         </ListItem>
@@ -34,8 +37,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: {},
@@ -62,11 +66,17 @@ export default {
       type: Boolean,
       default: false
     },
+    //限制上传数量
+    limitFileNum: {
+      type: Number,
+      required: false,
+      default: 0
+    },
     //是否按钮形式
     uploadBtn: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     //是否展示文件列表
     showFileList: {
@@ -74,12 +84,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 +115,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/"
     }
   },
 
@@ -120,19 +154,28 @@ export default {
       resultList: []
     }
   },
+  computed: {
+    downloadUrl: function () {
+      return this.ossServerContext + this.ossFileGetUrl;
+    }
+  },
   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中的一种');
+          self.loading = false;
           return false;
         } else {
           self.attachmentFile.fileName = file;
@@ -144,33 +187,31 @@ 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,
                 fileName: item.fileName,
@@ -179,7 +220,6 @@ export default {
                 showSize: formatterSizeUnit(item.length),
                 otherParam: self.otherParam
               };
-
               resultList.push(tmp);
               self.resultList.push(tmp);
             });
@@ -199,12 +239,32 @@ export default {
         self.$refs.uploadInput.value = null
       });
     },
+
+    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.fileCode) {
+        const url = this.fileOnlinePreviewHost + this.ossServerContext + this.ossFilePreviewUrl + item.fileCode + "?fullfilename=" + item.fileName + "." + item.fileType;
+        window.open(config.fileOnlinePreviewContext + '/onlinePreview?url=' + encodeURIComponent(this.encode64(url)));
+      }
+    },
     deleteFile: function (fileCode) {
       if (fileCode) {
-        var result = [];
-        var deletes = []
+        let result = [];
+        let deletes = []
         this.resultList.forEach(item => {
-          if (item.fileCode != fileCode) {
+          if (item.fileCode !== fileCode) {
             result.push(item);
           } else {
             deletes.push(item)
@@ -217,12 +277,51 @@ 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({
+              fileCode: 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)
+        }
+      },
+      deep: true
     }
   }
 }