文件上传

src/api/system.js

@@ -227,3 +227,8 @@ export function saveWebSetting (params) {
 export function deleteWebSetting (params) {
   return http.post('/authentication/web/setting/del', params)
 }
+
+// 文件上传
+export function fileUpload (params) {
+  return http.upload('/file/upload', params)
+}

src/views/humanResources/accumulatePoints/accumulatePointsApply/accumulatePointsApplyEditUpload.vue

@@ -5,18 +5,29 @@
       :show-file-list="false"
       :http-request="onImport"
       class="ml-2"
+      :on-success="onSuccess"
     >
-      <m-button size="mini" >
+      <m-button size="mini" :loading="loading">
         上传附件
       </m-button>
     </el-upload>
-    <m-button size="mini" class="ml-3" v-if="file">
+
+    <m-button size="mini" class="ml-3" v-if="previewUrl" @click="onOpen">
       查看附件
     </m-button>
+    <el-image
+      ref="hiddenPreview"
+      style="display: none;"
+      :src="previewUrl"
+      :preview-src-list="[previewUrl]"
+    ></el-image>
   </div>
 </template>
 
 <script>
+import {
+  fileUpload
+} from '@/api/system'
 export default {
   name: 'accumulatePointsApplyEditUpload',
   props: {
@@ -27,12 +38,34 @@ export default {
   },
   data () {
     return {
-      file: null
+      loading: false,
+      previewUrl: null
     }
   },
   methods: {
-    onImport (file) {
-
+    onOpen () {
+      const img = this.$refs.hiddenPreview.$el.querySelector('img')
+      img && img.click()
+    },
+    async onImport (response) {
+      this.loading = true
+      const param = new FormData()
+      param.append('file', response.file)
+      param.append('fileType', 'employee_score')
+      try {
+        const { msg } = await fileUpload(param)
+        this.$emit('input', msg)
+        // 创建预览
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          this.previewUrl = e.target.result
+        }
+        reader.readAsDataURL(response.file)
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
     }
   }
 }