last

components/Upload/Upload.vue

 <template>
     <div class="hello">
         <el-upload
-            :http-request="handleUpload"
-            :on-preview="handlePreview"
+               
             :on-remove="handleRemove"
             :on-success="handleSuccess"
             :before-remove="beforeRemove"
-            :limit="limit"
-            :on-exceed="handleExceed"
-            :file-list="fileList"
-            :list-type="listType"
+            :show-file-list="false"
             :accept="accept"
+            :before-upload="beforeUpload"
             class="upload-demo"
-            action
+            action="Fake Action"
+            :http-request="handleUpload"
             multiple
         >
-            <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">{{ tip }}</div>
+            <el-button size="small" type="primary" v-loading.fullscreen.lock="loading">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">
+                {{ tip }}
+            </div>
         </el-upload>
+        <ul>
+            <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>
     </div>
 </template>
 
 <script>
-import { put, getFileNameUUID } from "~/api/ali-oss";
+import { put, getFileNameUUID } from '@/api/ali-oss';
 
 export default {
-    name: "Upload",
+    name: 'Upload',
     props: {
         accept: {
             type: String,
-            default: ".pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx",
+            default: '.pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx,.JPEG'
         },
         tip: {
             type: String,
-            default: "上传大小不能超过2M",
+            default: '上传大小不能超过80M'
         },
         limit: {
             type: Number,
-            default: 5,
+            default: 3
         },
         action: {
             type: String,
-            default: "",
+            default: ''
         },
         headers: {
             type: Object,
-            default: () => {},
+            default: () => {}
+        },
+        fileList: {
+            type: Array,
+            default: () => []
         },
         name: {
             type: String,
-            default: "",
+            default: ''
         },
         listType: {
             type: String,
-            default: "text",
+            default: 'text'
         },
         max: {
             type: Number,
-            default: 10,
-        },
-        fileList: {
-            type: Array,
-            default: () => [],
-        },
+            default: 100
+        }
     },
     data() {
-        return {};
+        return {
+            loading: false
+        };
+    },
+    created() {
+        console.log(this.fileList);
     },
     methods: {
         emitInput(fileList) {
@@ -76,58 +91,77 @@ export default {
                 message.url = fileList[i].url;
                 message.fileName = fileList[i].name;
                 message.fileUrl = fileList[i].url;
+                message.uid = fileList[i].uid;
                 value.push(message);
             }
-            this.$emit("input", value);
+            console.log(value);
+            this.$emit('input', value);
         },
         beforeUpload(file) {
+          
             const max = this.max;
             const isLt2M = file.size / 1024 / 1024 < max;
             if (!isLt2M) {
                 this.$message.error(`上传附件大小不能超过 ${max} MB!`);
+                return;
+            }
+            if (this.fileList.length == this.limit) {
+                this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
+                return;
             }
-            return isLt2M;
+              this.loading=true
+            // 生成的文件名称
+            let objName = getFileNameUUID();
+            // 调用 ali-oss 中的方法
+            put(`${objName}${file.name}`, file).then((res) => {
+                console.log(res);
+                this.fileList.push(res);
+                this.emitInput(this.fileList);
+                 this.loading=false
+            });
         },
         handleRemove(file, fileList, index) {
-            this.$emit("on-remove", file, fileList);
+            this.$emit('on-remove', file, fileList);
             this.fileList = fileList;
             this.emitInput(fileList);
         },
-        handlePreview(file) {
-            this.$emit("on-preview", file);
-        },
-        handleExceed(files, fileList) {
-            this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
-        },
         beforeRemove(file, fileList) {
             return this.$confirm(`确定移除 ${file.name}？`);
         },
         handleSuccess(response, file, fileList) {
-            console.log("成功");
-            this.fileList = fileList;
-            this.$emit("on-success", file, fileList);
+            console.log('成功');
         },
         /**
          * 自定义上传方法
          */
-        handleUpload(option) {
-            const max = this.max;
-            const isLt2M = option.file.size / 1024 / 1024 < max;
-            if (isLt2M) {
-                // 生成的文件名称
-                let objName = getFileNameUUID();
-                // 调用 ali-oss 中的方法
-                put(`${objName}${option.file.name}`, option.file).then(
-                    (res) => {
-                        res.fileName = res.name;
-                        res.fileUrl = res.url;
-                        this.fileList.push(res);
-                        this.emitInput(this.fileList);
-                    }
-                );
-            }
+        handleDelete(index, item) {
+            this.$confirm(`确定要删除${item.name}么？`, '提示', {
+                type: 'warning'
+            })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.fileList.splice(index, 1);
+                    this.$emit('input', this.fileList);
+                })
+                .catch(() => {});
         },
-    },
+
+        handleUpload(option) {
+            console.log(option.file);
+        }
+    }
 };
 </script>
-<style scoped></style>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.upload {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 30px;
+    width: 100px;
+}
+</style>
+
+

pages/index/message/news.vue

@@ -218,8 +218,9 @@ export default {
     },
     //返回
     returnPrev() {
+    /* Cookies.set() */
       this.isList = true;
-      if(Cookies.get("status")){
+      /* if(Cookies.get("status")){
         let mess = {}
         mess.cateId = this.detailsId
         this.getListContent(mess);
@@ -228,7 +229,7 @@ export default {
         let mess = {}
         mess.cateId = this.detailsId
         this.getListContent(mess);
-      }
+      } */
       /* if(this.activeName =='124'){
         let mess = {}
         mess.cateId = 124
@@ -236,8 +237,8 @@ export default {
       } */
      /*  console.log(this.detailsId)
       this.getListContent(mess); */
-      Cookies.remove("status")
-      Cookies.remove("contentStatus")
+      /* Cookies.remove("status")
+      Cookies.remove("contentStatus") */
     },
   },
 };

pages/login/examine.vue

@@ -824,7 +824,7 @@ export default {
       fileList: [],
       flag: true, //该值变化，就会触发刷新
       code: "", //刷新后的验证码
-      active: 0,
+      active: 1,
       checked: true,
       adminform: {
         name: "",