feat: 附件上传组件封装

附件上传组件封装,具体demo参考CourseAdd.vue

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@ant-design-vue/pro-layout": "^0.3.4",
     "@antv/data-set": "^0.10.2",
-    "ant-design-vue": "^1.6.2",
+    "ant-design-vue": "^1.7.7",
     "axios": "^0.19.0",
     "core-js": "^3.1.2",
     "draftjs-to-html": "^0.9.1",
@@ -65,7 +65,7 @@
     "opencollective-postinstall": "^2.0.2",
     "vue-svg-icon-loader": "^2.1.1",
     "vue-template-compiler": "^2.6.10",
-    "webpack-theme-color-replacer": "^1.3.12",
-    "webpack": "^4.44.2"
+    "webpack": "^4.44.2",
+    "webpack-theme-color-replacer": "^1.3.12"
   }
 }

src/api/sys/upload.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function reqUploadFile(params) {
+  return request({
+    url: 'sys/oss/upload',
+    method: 'post',
+    data: params
+  })
+}

src/components/DbUpload/DbUpload.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <template v-if="type === 'file'">
+      <a-upload
+        :multiple="multiple"
+        :file-list="value"
+        :accept="accept"
+        :customRequest="uploadFile"
+        :remove="handlerRemove"
+      >
+        <a-button> <a-icon type="upload" /> 上传附件 </a-button>
+      </a-upload>
+    </template>
+    <template v-if="type === 'img'">
+      <a-upload
+        list-type="picture-card"
+        :multiple="multiple"
+        :file-list="value"
+        :accept="accept"
+        :customRequest="uploadFile"
+        :remove="handlerRemove"
+        @preview="handlePreview"
+      >
+        <div v-if="max>value.length">
+          <a-icon type="plus" />
+          <div class="ant-upload-text">
+            上传图片
+          </div>
+        </div>
+      </a-upload>
+      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+        <img alt="example" style="width: 100%" :src="previewImage" />
+      </a-modal>
+    </template>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { reqUploadFile } from '@/api/sys/upload'
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => resolve(reader.result)
+    reader.onerror = error => reject(error)
+  })
+}
+export default {
+  name: 'DbUpload',
+  props: {
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'file' // img: 图片上传, file: 文件上传
+    },
+    // 最大上传数量
+    max: {
+      type: [Number, String],
+      default: 2 // 默认不做限制
+    },
+    // [{name: '必传', uid: '必传', url: '必传'}]
+    value: {
+      type: Array,
+      default: () => []
+    },
+    accept: {
+      type: String,
+      default: 'image/*' // 默认只能上传图片,如果需要上传其他请改为*或者自己需要的格式
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  data() {
+    return {
+      previewVisible: false,
+      previewImage: ''
+    }
+  },
+  methods: {
+    handleCancel() {
+      this.previewVisible = false
+    },
+    async handlePreview(file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj)
+      }
+      this.previewImage = file.url || file.preview
+      this.previewVisible = true
+    },
+    // 重写上传文件
+    uploadFile(data) {
+      const { max } = this
+      const formData = new FormData()
+      formData.append('file', data.file)
+      reqUploadFile(formData).then(res => {
+        if (res.code === 200) {
+          const file = {
+            uid: res.uid,
+            name: res.name, // 文件名
+            url: res.url
+          }
+          const list = [...this.value]
+          list.push(file)
+          if (list.length > max) {
+            this.$message.warning(`最多只能上传${max}个附件`)
+            return
+          }
+          this.$emit('change', list)
+        }
+      })
+    },
+    // 点击删除
+    handlerRemove(file) {
+      const index = _.findIndex(this.value, ['uid', file.uid])
+      const newFileList = this.value.slice()
+      newFileList.splice(index, 1)
+      this.$emit('change', newFileList)
+    }
+  }
+}
+</script>
+
+<style lang="less" scope>
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>

src/views/course/CourseAdd.vue

@@ -83,15 +83,7 @@
         <!-- 上传封面图片 -->
         <a-col :span="18" :offset="3">
           <a-form-model-item label="上传封面图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
-            <a-upload action="/dawa/sys/oss/upload?sourceId=course" list-type="picture-card" :file-list="fileList" :headers="getToken()" @change="handleChange" @preview="handlePreview">
-              <div v-if="fileList.length < 1">
-                <a-icon type="plus" />
-                <div class="ant-upload-text">上传</div>
-              </div>
-            </a-upload>
-            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
-              <img alt="example" style="width: 100%" :src="previewImage" />
-            </a-modal>
+            <db-upload v-model="fileList"></db-upload>
           </a-form-model-item>
         </a-col>
 
@@ -118,6 +110,7 @@ import storage from 'store'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
 import { dictToTree } from '@/utils/util'
+import DbUpload from '@/components/DbUpload/DbUpload.vue'
 
 export default {
   name: 'step1',
@@ -128,6 +121,7 @@ export default {
         coverPath: '',
         tags: [],
         courseTags: [],
+        // fileList: [] // 上传附件
       },
       url: '',
       previewVisible: false,
@@ -140,8 +134,9 @@ export default {
     }
   },
   components: {
+    DbUpload,
     courseAdd,
-    getCourseDetails,
+    getCourseDetails
   },
   created() {
     this.dictionaryDropDown()

vue.config.js

@@ -102,10 +102,10 @@ const vueConfig = {
     // 如果需要开启代理，请移除mockjs /src/main.jsL11
     proxy: {
       '/dawa': { // 捕获API的标志，如果API中有这个字符串，那么就开始匹配代理
-        target: 'http://localhost:8000/', // 地址可以是域名，也可以是IP地址。比如API请求/api/getList, 会被代理到请求http://www.baidu.com/api/getList 。
+        target: 'http://a.3a6.cn/dawa', // 地址可以是域名，也可以是IP地址。比如API请求/api/getList, 会被代理到请求http://www.baidu.com/api/getList 。
         ws: false,
-        changeOrigin: true // 如果target是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。
-        , pathRewrite: {
+        changeOrigin: true,
+        pathRewrite: {
           '^/dawa': '/'
         }
       }