上传下载

src/views/facilityManage/common-vue/uploader.vue

@@ -21,7 +21,7 @@
 <script>
 import { uploadFile } from '@/api/api.js'
 import { chooseAlbumAndTakePhoto } from '@/utils/dsbridge'
-import { downloadUrl } from '@/settings'
+import { getImageBlobUrl } from '@/utils/index'
 export default {
   props: {
     type: {
@@ -41,17 +41,23 @@ export default {
   data() {
     return {
       disableImg: false,
-      fileList: this.value,
-      activTimer: null,
+      fileList: [],
     }
   },
-  mounted() {
-    this.activTimer = setTimeout(() => {
-      this.fileList = this.value
-    }, 200)
+  watch: {
+    // 父组件异步回填(如历史记录 getHistory 晚于 mounted)时同步列表;
+    // 上传后父组件把 value 改写为 [url字符串] 时不覆盖本地回显
+    value: {
+      handler(val) {
+        if (val && val.length && val.every(item => typeof item === 'object')) {
+          this.fileList = val.map(item => ({ ...item, isImage: true }))
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   beforeDestroy() {
-    clearTimeout(this.activTimer)
     this.fileList = []
   },
   methods: {
@@ -83,10 +89,14 @@ export default {
         const res = await uploadFile(params)
         console.log('--------res---', res)
         if (res.code == 0) {
+          const blobUrl = await getImageBlobUrl(res.data.attach_id)
+          console.log('--------回显 blobUrl---', blobUrl)
+          if (!blobUrl) return
           this.fileList.push({
             fileName: res.data.original_name,
             fileId: res.data.attach_id,
-            url: `${downloadUrl}${res.data.attach_id}`,
+            url: blobUrl,
+            isImage: true,
           })
           this.$emit('onUpload', this.fileList, this.type)
         }