上传组件

src/components/Upload/index.vue

@@ -1,165 +1,172 @@
 <template>
   <div>
-    <el-upload
-      :disabled="disabledUpload"
-      ref="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"
-      :on-progress="onProgress"
-      :on-error="onError"
-    >
-      <el-button v-if="type === 'file'" type="primary" style="margin:0">{{ title }}</el-button>
-      <i v-else slot="default" class="el-icon-plus" />
+    <el-upload v-if="hidden" :action="action" :headers="headers" :multiple="multiple" :data="data"
+      :show-file-list="showFileList" :accept="accept" :list-type="listType" :on-progress="onProgress"
+      :on-error="onError" :on-success="onSuccess" :before-upload="beforeUpload" :disabled="disabled">
+      <el-button v-if="listType === 'text'" :type="btnType">{{ title }}</el-button>
+      <i v-else class="el-icon-plus" />
     </el-upload>
-    <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" />
-      </span>
+    <el-progress v-if="isShow()" type="circle" :percentage="percent" :status="isStatus" />
+    <div class="upload-image" v-if="img">
+      <el-image :src="img" />
+      <i v-if="disabled === false" class="el-icon-delete" @click="getDelete" />
     </div>
   </div>
 </template>
 
 <script>
-// import { client } from '@/api/oss'
 import { getToken } from "@/utils/auth";
 export default {
   props: {
-    type: {
+    // 图片
+    url: String,
+    // 类型
+    listType: {
       type: String,
-      default: "image",
+      default: 'text'
     },
-    // 图片
-    url: {
+    // 是否支持多选文件
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 限制上传文件类型
+    accept: {
       type: String,
-      default: "",
+      default: ''
     },
-    // 隐藏删除按钮
+    // 是否禁用
     disabled: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
+  },
+  watch: {
+    url(val) {
+      this.img = val ? val : ''
+      this.hidden = val ? false : true
+    }
   },
   data() {
     return {
-      // 额外参数
-      data: {
-        multipartFile: new FormData(),
-      },
-      // 文件大小
-      size: 0,
+      // 上传地址
+      action: this.listType === 'text' ? `${process.env.VUE_APP_BASE_API}/system/file/file/upload` : `${process.env.VUE_APP_BASE_API}/system/file/picture/upload`,
       // 请求头
       headers: {
         Authorization: "Bearer " + getToken(),
       },
-      // 上传地址
-      action: "",
-      // 隐藏上传按钮
-      hideUpload: true,
-      // 禁用上传按钮
-      disabledUpload: false,
-      // 按钮标题
-      title: "上传文件",
-      // 图片
-      newUrl: "",
-    };
-  },
-  watch: {
-    url(val) {
-      this.newUrl = val;
-      this.hideUpload = val ? false : true
-    },
+      // 附带参数
+      data: {},
+      // 文件字段名
+      name: '',
+      // 是否显示已上传文件列表
+      showFileList: false,
+
+      // 是否显示上传按钮
+      hidden: true,
+      // 按钮文字
+      title: '上传文件',
+      // 按钮颜色
+      btnType: 'primary',
+      // 进度条
+      percent: 0,
+      // 上传失败进度条
+      isStatus: null,
+      // 显示图片
+      img: '',
+      // 传给父级的参数
+      form: {}
+    }
   },
   mounted() {
-    if (this.url) {
-      this.newUrl = this.url;
-      this.hideUpload = false;
-    }
-
-    this.action =
-      this.type === "image"
-        ? `${process.env.VUE_APP_BASE_API}/system/file/picture/upload`
-        : `${process.env.VUE_APP_BASE_API}/system/file/file/upload`;
+    this.img = this.url ? this.url : ''
+    this.hidden = this.url ? false : true
   },
   methods: {
-    // 上传服务器之前提交文件
+    // 上传之前
     beforeUpload(file) {
-      this.data.multipartFile = file;
-      this.size = file.size;
-      this.disabledUpload = true;
+      this.data.multipartFile = file
+      this.name = file.name
+      if (this.listType === 'text') {
+        this.form.size = file.size
+      } else {
+        this.hidden = false
+      }
     },
-
-    // 上传成功
-    onSuccess(file) {
-      this.hideUpload = false;
-      this.disabledUpload = false;
-      this.newUrl = file.data;
-      this.title = "上传成功";
-      this.$emit("success", {
-        file: this.newUrl,
-        size: this.size,
-      });
-    },
-
-    // 上传时 进度条
-    onProgress(file) {
-      this.title = `${parseInt(file.percent - 1)}%`;
+    // 上传过程中
+    onProgress(e) {
+      this.percent = parseInt(e.percent)
+      this.title = `已上传${parseInt(e.percent - 1)}%`
     },
-
     // 上传失败
-    onError(err) {
+    onError() {
       this.title = `上传失败`
+      this.btnType = `danger`
+      this.isStatus = 'exception'
     },
+    // 上传成功
+    onSuccess(res) {
+      if (this.listType === 'picture-card') {
+        // 显示图片
+        this.img = res.data
+      } else {
+        // 按钮文字
+        this.title = '上传成功'
+        this.btnType = 'success'
+      }
 
-    // 删除
-    handleRemove() {
-      this.hideUpload = true;
-      this.$emit("delete", (this.newUrl = ""));
+      // 传参
+      this.form.file = res.data
+      this.$emit('upload', this.form)
     },
 
-    // httpRequest(e) {
-    //   client.put(e.file.name, e.file).then(res => {
-    //     console.log(res);
-    //   })
-    // },
-  },
-};
+    // 删除图片
+    getDelete() {
+      if (this.listType !== 'text') {
+        this.hidden = true
+        this.percent = 0
+        this.img = ''
+      }
+      this.$emit('upload', this.form = {})
+    },
+
+    // 是否显示图片进度条
+    isShow() {
+      if (this.listType !== 'text') {
+        return !this.hidden && this.img === '' ? true : false
+      } else {
+        return false
+      }
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.upload-img {
+.upload-image {
   position: relative;
   width: 148px;
   height: 148px;
 
-  .upload-btn {
+  .el-icon-delete {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 100%;
     transform: translate(-50%, -50%);
-    transition: all 0.3s;
     background: rgb(0 0 0 / 50%);
     color: #fff;
+    transition: all 0.3s;
+    font-size: 24px;
     text-align: center;
     line-height: 148px;
-    font-size: 24px;
     opacity: 0;
-
-    i {
-      cursor: pointer;
-    }
   }
 
-  .upload-btn:hover {
+  i:hover {
     opacity: 1;
+    cursor: pointer;
   }
 }
 </style>