文件 / 图片上传组件

src/components/Upload/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <el-upload v-if="hideUpload" :action="action" :headers="headers" :data="data"
-      :show-file-list="false" list-type="picture-card" :before-upload="beforeUpload"
-      :on-success="onSuccess">
-      <i slot="default" class="el-icon-plus" />
+    <el-upload v-if="type === 'file' ? true : hideUpload" :action="action" :headers="headers" :data="data" :show-file-list="false"
+      :list-type="type === 'file' ? '':'picture-card'" :before-upload="beforeUpload" :on-success="onSuccess">
+      <el-button v-if="type === 'file'" type="primary" style="margin:0">上传文件</el-button>
+      <i v-else slot="default" class="el-icon-plus" />
     </el-upload>
-    <div class="upload-img" v-else>
+    <div class="upload-img" v-if="type === 'file' ? false : hideUpload === false">
       <el-image :src="newUrl" />
       <span v-if="disabled === false" class="upload-btn">
         <i class="el-icon-delete" @click="handleRemove" />
@@ -18,13 +18,17 @@
 import { getToken } from "@/utils/auth";
 export default {
   props: {
+    type: {
+      type: String,
+      default: 'image'
+    },
     // 图片
     url: {
       type: String,
       default: ''
     },
     // 隐藏删除按钮
-    disabled:{
+    disabled: {
       type: Boolean,
       default: true
     }
@@ -46,7 +50,7 @@ export default {
     }
   },
   watch: {
-    url(val){
+    url(val) {
       if (val) {
         this.newUrl = val
         this.hideUpload = false