ofClient

src/apis/document.js

@@ -50,5 +50,9 @@ export default {
 
   saveEditDocument: {
     url: '/vue/client/save-edit-document'
+  },
+
+  uploadSingle: {
+    url: 'http://vue.jinchangxiao.com/vue/upload/single'
   }
 }

src/components/common/singleUpload.vue

+<template>
+  <div class="single-upload">
+    <el-row :gutter="10">
+      <el-col :span="4" :class="['client-label', 'text-right', {'required': required}]">
+        <span>{{label}}</span>
+      </el-col>
+      <el-col :span="14">
+        <el-upload
+          ref="upload"
+          :limit="1"
+          class="upload-single"
+          :http-request="upload"
+          :auto-upload="false"
+          list-type="text"
+          :multiple="false"
+          :before-upload="beforeUpload"
+          :on-remove="handleRemove"
+          action="/vue/upload/single"
+          :on-change="handleChange"
+          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
+          :file-list="fileList">
+          <el-button size="small" type="primary" @click="submitUpload" :disabled="fileList.length > 0">上传到服务器
+          </el-button>
+          <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
+          <div class="progress">
+            <el-progress :percentage="progress" v-if="progress > 0 && progress < 100"></el-progress>
+          </div>
+        </el-upload>
+        <span class="tips">{{tips}}
+          <span class="text-danger">当有新文件上传时, 之前上传的文件将会被删除</span></span>
+      </el-col>
+      <el-col :span="6">
+        <slot name="formError"></slot>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import $ from 'jquery'
+  import { request } from '@/lib/request'
+  import {
+    api
+  } from '@/lib/commonMixin'
+  // import itemMixin from '../../lib/singleItemMixin'
+
+  export default {
+    name: 'single-upload',
+    // mixins: [itemMixin],
+    data () {
+      return {
+        fileList: [],
+        progress: 0
+      }
+    },
+    methods: {
+      beforeUpload (file, upload) {
+        const isLt50M = file.size / 1024 / 1024 < 50
+        if (!isLt50M) {
+          this.$message.error('上传文件大小不能超过50MB!请重新选择文件') // 上传头像图片大小不能超过 2MB
+        }
+        return isLt50M
+      },
+      handleRemove (file, fileList) {
+        this.fileList = fileList
+        this.$refs.upload.abort()
+        this.$refs.upload.clearFiles()
+        this.$emit('update:item', '')
+      },
+      progressBar (evt) {
+        var loaded = evt.loaded // 已经上传大小情况
+        var tot = evt.total // 附件总大小
+        var per = Math.floor(100 * loaded / tot) // 已经上传的百分比
+        this.progress = per // 绘制经度条
+      },
+      handleChange () {
+      },
+      submitUpload () {
+        this.$refs.upload.submit()
+      },
+      upload (item) {
+        debugger
+        let formData = new FormData()
+        formData.append('UploadForm[attachmentFile]', item.file)
+        let _this = this
+        request({
+          url: api.uploadSingle.url,
+          // url: 'http://localhost:13009/bankimage/uploadImgToBank',
+          type: 'POST',
+          cache: false,
+          data: formData,
+          contentType: false,
+          processData: false,
+          xhr () {
+            let xhr = $.ajaxSettings.xhr()
+            if (xhr.upload) {
+              xhr.upload.addEventListener('progress', _this.progressBar, false)
+              return xhr
+            }
+          }
+        }).then(res => {
+          this.progress = 95
+          this.fileList.push({
+            name: res.orig_name,
+            url: res.path
+          })
+          this.$emit('update:item', res.key)
+        }).finally(() => {
+          this.progress = 100
+        })
+      }
+    },
+    props: {
+      tips: {
+        type: String,
+        default: ''
+      },
+      label: {
+        type: String,
+        default: ''
+      },
+      required: {
+        type: Boolean,
+        default: false
+      },
+      fileName: {
+        type: String,
+        default: ''
+      }
+    },
+    watch: {
+      fileName: {
+        handler (val) {
+          if (val !== '') {
+            this.fileList.push({
+              name: val
+            })
+          }
+        },
+        immediate: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .tips {
+    display: block;
+    line-height: 1.5;
+    color: #6c757d;
+    font-size: 12px;
+  }
+</style>
+<style>
+  .single-upload {
+    width: 100%;
+  }
+
+  .single-upload .tips {
+    display: block;
+    margin: 0
+  }
+
+  .single-upload .upload-single {
+    position: relative;
+    clear: both;
+    overflow: hidden;
+  }
+
+  .single-upload .progress {
+    position: absolute;
+    width: 100%;
+    right: 0;
+    bottom: -17px;
+    height: 15px;
+    box-shadow: none;
+  }
+
+  .single-upload .upload-single .el-upload-list--text {
+    height: 32px;
+    display: inline-block;
+    border: 1px solid #ffffff;
+    width: 100%;
+    border-radius: 4px;
+    background: #fff;
+    vertical-align: middle;
+  }
+
+  .single-upload .upload-single .el-upload {
+    display: inline-block;
+  }
+
+  .single-upload .upload-single > .el-button {
+    display: inline-block;
+  }
+
+  .single-upload .upload-single > .el-button {
+    vertical-align: middle;
+  }
+
+  .single-upload .upload-single .el-upload-list__item:first-child {
+    margin-top: 3px;
+  }
+</style>

src/components/document_client/clientForm.vue

@@ -16,11 +16,24 @@
           v-model.trim="model.description">
         </el-input>
       </el-form-item>
+      <el-form-item label="文件名：" prop="attachment_id" class="ec-clear-left ec-form-item-lg">
+        <single-upload
+          label=""
+          :file-name="getFileName('receiptScan')"
+          tips="只能上传 jpg,png,pdf 类型文件, 文件不能超过50M"
+          :form-item="model.attachment_id"
+          @update:item="val => {model.attachment_id = val}">
+          <!-- <span slot="formError" class="el-form-item__error">
+            {{errorData['receipt_scan']}}
+          </span> -->
+        </single-upload>
+      </el-form-item>
     </el-form>
   </section>
 </template>
 <script>
 import settingMixin from '../common/settingMixin'
+import singleUpload from '../common/singleUpload'
 import {
   requestAPI,
   api
@@ -35,10 +48,12 @@ export default {
   },
 
   components: {
+    singleUpload
   },
 
   data () {
     return {
+      i: '',
       rules: {
         'title': [
           {required: true, message: '标题不能为空', trigger: 'blur'}
@@ -80,6 +95,10 @@ export default {
       }).then(res => {
         return res
       })
+    },
+
+    getFileName (key) {
+      return ''
     }
   }
 }