update

src/components/s-upload.vue

@@ -1,125 +0,0 @@
-<template>
-  <div id="upload">
-    <el-upload
-      v-if="url"
-      ref="upload"
-      :action="url"
-      :limit="limit"
-      :show-file-list="showList"
-      :accept="accept"
-      :list-type="listType"
-      :file-list="fileList"
-      :on-exceed="outLimit"
-      :on-preview="filePreview"
-      :before-upload="beforeUpload"
-      :on-success="onSuccess"
-      :before-remove="onRemove"
-    >
-      <el-button type="primary" size="mini">选择文件</el-button>
-      <template #tip v-if="tip">
-        <p style="color:#ff0000">{{ tip }}</p>
-      </template>
-    </el-upload>
-    <el-dialog :visible.sync="dialog.show" append-to-body>
-      <img width="100%" :src="dialog.url" alt="" />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash';
-export default {
-  name: 'upload',
-  props: {
-    // 图片上传地址
-    url: { type: null },
-    // 可上传文件数目
-    limit: { type: Number },
-    // 存储图片字段
-    type: { type: String },
-    // 是否显示已上传的文件列表
-    showList: { type: Boolean, default: true },
-    // 接收上传的文件类型
-    accept: { type: String, default: 'image/png, image/jpeg' },
-    // 文件列表的类型--picture-card---picture
-    listType: { type: String, default: 'picture-card' },
-    // 文件提醒
-    tip: { type: String, default: undefined },
-    // 已有数据，赋值，预览
-    data: { type: null },
-  },
-  components: {},
-  data: () => ({
-    // 图片预览
-    dialog: { show: false, url: '' },
-    // 图片列表
-    fileList: [],
-  }),
-  created() {
-    // 已有数据，判断数据格式，array,object,String
-    if (this.data) this.defalutProcess(this.data);
-  },
-  watch: {
-    data: {
-      deep: true,
-      immediate: true,
-      handler(val) {
-        if (val) this.defalutProcess(this.data);
-      },
-    },
-  },
-  computed: {},
-  methods: {
-    // 图片预览
-    filePreview(file) {
-      // this.dialog = { show: true, url: file.url };
-      window.open(file.url);
-    },
-    // 上传前
-    beforeUpload(file) {
-      // // 文件大小改为10Mb
-      // const isLt10M = file.size / 1024 / 1024 < 10;
-      // if (!isLt10M) this.$message.error('文件超出10M');
-      // return isLt10M;
-    },
-    // 只允许上传多少个文件
-    outLimit() {
-      this.$message.error(`只允许上传${this.limit}个文件`);
-    },
-    // 上传成功,response：成功信息，file：图片信息，fileList：图片列表
-    onSuccess(response, file, fileList) {
-      if (response.errcode === 0) {
-        this.$emit('upload', { type: this.type, data: { ...response, name: file.name } });
-      } else {
-        this.$message({ message: `上传失败`, type: 'error' });
-      }
-    },
-    // 删除图片
-    onRemove(file, fileList) {
-      this.$set(this, `fileList`, fileList);
-      this.$emit('delete', { type: this.type, data: file, list: fileList });
-      return true;
-    },
-    // 已有数据，判断数据格式，array,object,String
-    defalutProcess(val) {
-      if (_.isArray(val)) {
-        let newArr = val.map(item => {
-          return { name: item.name, url: item.url };
-        });
-        this.$set(this, `fileList`, newArr);
-      } else if (_.isObject(val)) {
-        let newArr = {};
-        if (_.get(val, `url`)) {
-          newArr.name = val.name || '附件';
-          newArr.url = val.url;
-          this.$set(this, `fileList`, [newArr]);
-        }
-      } else if (typeof val === 'string') {
-        this.$set(this, `fileList`, [{ name: '附件', url: val }]);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/plugins/components.js

@@ -1,13 +1,13 @@
 import Vue from 'vue';
 import dataTable from '@/components/usual/c-table.vue';
 import dataForm from '@/components/usual/c-form.vue';
-import sUpload from '@/components/s-upload.vue';
+import dataUpload from '@/components/usual/c-upload.vue';
 import dataSearch from '@/components/usual/c-search.vue';
 import dataBtn from '@/components/usual/c-btnbar.vue';
 const Plugin = (vue) => {
   vue.component('data-table', dataTable);
   vue.component('data-form', dataForm);
-  vue.component('sUpload', sUpload);
+  vue.component('data-upload', dataUpload);
   vue.component('data-search', dataSearch);
   vue.component('data-btn', dataBtn);
 };