修复问题

src/apis/setting.js

@@ -8,6 +8,10 @@ const setting = {
     url: 'http://vue.jinchangxiao.com/vue/setting/save-new-import-file'
   },
 
+  uploadPic: {
+    url: 'http://vue.jinchangxiao.com/vue/upload/cdn'
+  },
+
   importClient: {
     url: '/vue/setting/import-client'
   },

src/components/common/singleUploadPic.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/cdn"
+          :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) {
+        let formData = new FormData()
+        formData.append('UploadForm[attachmentFile]', item.file)
+        let _this = this
+        request({
+          url: api.uploadPic.url,
+          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/setting_list/basic/form.vue

+<template>
+  <section class="ec-page-wrapper" style="overflow: hidden; padding-bottom: 0px;">
+    <el-form label-width="120px" ref="form" :rules="rules" :model="model" class="ec-create-form">
+      <el-form-item label="Logo图标" prop="attachment_id" class="ec-clear-left ec-form-item-lg">
+        <el-date-picker
+          v-model="value11"
+          type="date"
+          placeholder="选择日期"
+          format="yyyy 年 MM 月 dd 日"
+          value-format="yyyy-MM-dd">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="Logo图标" prop="attachment_id" class="ec-clear-left ec-form-item-lg">
+        <single-upload
+          label=""
+          :file-name="getFileName('receiptScan')"
+          tips="建议上传一张透明背景的PNG文件，最大高度140像素，最大宽度200像素。"
+          :form-item="model.attachment_id"
+          @update:item="val => {model.attachment_id = val}">
+        </single-upload>
+      </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文件，最大高度600像素，最大宽度1140像素。"
+          :form-item="model.attachment_id"
+          @update:item="val => {model.attachment_id = val}">
+        </single-upload>
+      </el-form-item>
+    </el-form>
+  </section>
+</template>
+<script>
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+import singleUpload from '../common/singleUploadPic'
+export default {
+  name: 'basicForm',
+
+  components: {
+    singleUpload
+  },
+
+  data () {
+    return {
+      model: {},
+      rules: {}
+    }
+  },
+
+  created () {
+  },
+
+  mounted () {
+  },
+
+  computed: {
+  },
+
+  methods: {
+    getNew () {
+    },
+
+    getEdit (id) {
+      // return requestAPI(api[`getEdit${this.t}${this.tt}`], {id})
+      //   .then((res) => {
+      //     return res.model
+      //   })
+    },
+
+    _validate (cb) {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+        }
+      })
+    },
+
+    _resetFields () {
+      this.$refs['form'].resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ec-create-form .el-form-item {
+  width: 70%;
+}
+// .ec-create-form .el-form-item {
+//   width: 100%;
+// }
+</style>