1.预览文本文件

2.将 this 赋值给 that, 以便在 callback 中使用 vue context 中的 this
3.使用 css 属性处理文本中的换行符(\n)

src/views/disk/FileList.vue

@@ -206,8 +206,8 @@
                 theme-color="#87CEFA"
               />
             </div>
-            <div v-else-if="fileDetail.fileType === 1004">
-              <span>文本文件</span>
+            <div v-else-if="fileDetail.fileType === 1004" style="white-space: pre-wrap;">
+              {{textContent}}
             </div>
             <div v-else-if="fileDetail.fileType === 1005">
               <span>文本文件</span>
@@ -307,7 +307,8 @@ export default {
         fileIds: []
       },
       videoProp: null,
-      fileUrl: null
+      fileUrl: null,
+      textContent: null,
     }
   },
   created() {
@@ -479,6 +480,19 @@ export default {
               { name: this.fileDetail.filename, url: this.fileDetail.originalUrl }
             ]
           } else if (fileType === 1004) {
+            this.textContent = null
+            const textUrl = this.fileDetail.originalUrl
+            var that = this
+            fetch(textUrl).then(function (data) {
+              const contentType = data.headers.get("content-type")
+              console.log(contentType)
+              data.text().then(result => {
+                that.textContent = result
+                console.log(that.textContent)
+              })
+            }).catch(e => {
+              this.$message(e)
+            })
           } else if (fileType === 1005) {
           } else if (fileType === 1006) {
             const pdfUrl = this.fileDetail.originalUrl