文件放上才显示

src/components/Upload/Upload.vue

@@ -18,8 +18,12 @@
             </div>
         </el-upload>
         <ul>
-            <li class="flex link" v-for="(item, index) in fileList" :key="index">
-                <div style="margin-right: 20px">{{ item.name }}</div>
+            <li class="flex-item link" v-for="(item, index) in fileList" :key="index">
+                <el-popover placement="top-start" title="文件名称" width="500" trigger="hover" :content="item.name">
+                    <div class="upload" slot="reference">
+                        <a :href="item.url" target="_blank">{{ item.name }}</a>
+                    </div>
+                </el-popover>
                 <div @click="handleDelete(index, item)">删除</div>
             </li>
         </ul>
@@ -97,7 +101,7 @@ export default {
             const isLt2M = file.size / 1024 / 1024 < max;
             if (!isLt2M) {
                 this.$message.error(`上传附件大小不能超过 ${max} MB!`);
-                return
+                return;
             }
             if (this.fileList.length == this.limit) {
                 this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
@@ -107,7 +111,7 @@ export default {
             let objName = getFileNameUUID();
             // 调用 ali-oss 中的方法
             put(`${objName}${file.name}`, file).then((res) => {
-                console.log(res)
+                console.log(res);
                 this.fileList.push(res);
                 this.emitInput(this.fileList);
             });
@@ -149,6 +153,14 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped></style>
+<style scoped>
+.upload {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 30px;
+    width: 100px;
+}
+</style>