文件上传问题全部解决

src/components/Upload/Upload.vue

@@ -4,10 +4,7 @@
             :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"
@@ -20,6 +17,12 @@
                 {{ tip }}
             </div>
         </el-upload>
+        <ul>
+            <li class="flex link" v-for="(item, index) in fileList" :key="index">
+                <div style="margin-right: 20px">{{ item.name }}</div>
+                <div @click="handleDelete(index, item)">删除</div>
+            </li>
+        </ul>
     </div>
 </template>
 
@@ -90,19 +93,22 @@ export default {
             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;
+            }
             // 生成的文件名称
-
             let objName = getFileNameUUID();
             // 调用 ali-oss 中的方法
             put(`${objName}${file.name}`, file).then((res) => {
                 console.log(file);
                 this.fileList.push(res);
-                const max = this.max;
-                const isLt2M = file.size / 1024 / 1024 < max;
-                if (!isLt2M) {
-                    this.$message.error(`上传附件大小不能超过 ${max} MB!`);
-                }
-                return isLt2M;
                 this.emitInput(this.fileList);
             });
         },
@@ -114,9 +120,6 @@ export default {
         // handlePreview(file) {
         //     this.$emit('on-preview', file);
         // },
-        handleExceed(files, fileList) {
-            this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
-        },
         beforeRemove(file, fileList) {
             return this.$confirm(`确定移除 ${file.name}？`);
         },
@@ -126,6 +129,18 @@ export default {
         /**
          * 自定义上传方法
          */
+        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);
         }

src/components/Upload/specialUpload.vue

@@ -141,12 +141,17 @@ export default {
             this.$emit('input', value);
         },
         beforeUpload(file) {
-            // 生成的文件名称
-            console.log(this.fileList.length, this.limit);
+            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;
             }
+             // 生成的文件名称
             let objName = getFileNameUUID();
             // 调用 ali-oss 中的方法
             put(`${objName}${file.name}`, file).then((res) => {

src/pages/purchaser/bid/releaseProject/message.vue

@@ -169,7 +169,7 @@
               </el-input>
             </el-form-item>
             <el-form-item label="附件：" prop="file">
-              <upload :tip="tip" :limit="20" :max="10" accept=".PDF,.JPG,.JPEG,.ZIP,.RAR,.docx,.doc,.docx" @input="getfile"></upload>
+              <upload :tip="tip" :limit="20" :max="15" accept=".PDF,.JPG,.JPEG,.ZIP,.RAR,.docx,.doc,.docx" @input="getfile"></upload>
             </el-form-item>
           </el-form>
         </div>