gengxin

src/components/upload.vue

@@ -4,18 +4,27 @@
       v-if="url"
       ref="upload"
       :action="url"
-      list-type="picture-card"
+      :list-type="listType"
       :file-list="fileList"
       :limit="limit"
       :on-exceed="outLimit"
       :on-preview="handlePictureCardPreview"
       :before-remove="handleRemove"
       :on-success="onSuccess"
-      accept=".jpg,.jpeg,.png,.bmp,.gif,.svg"
+      :before-upload="beforeUpload"
+      :show-file-list="showList"
+      :accept="accept"
     >
-      <template>
+      <el-button size="small" type="primary" v-if="isBtn">点击上传</el-button>
+      <template v-else-if="uploadBtn">
+        <el-button type="danger">选择文件</el-button>
+      </template>
+      <template v-else>
         <i class="el-icon-plus"></i>
       </template>
+      <template #tip v-if="tip">
+        {{ tip }}
+      </template>
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt="" />
@@ -24,6 +33,7 @@
 </template>
 
 <script>
+import _ from 'lodash';
 export default {
   name: 'upload',
   props: {
@@ -31,6 +41,12 @@ export default {
     limit: { type: Number },
     data: { type: null },
     type: { type: String },
+    isBtn: { type: Boolean, default: false },
+    uploadBtn: { type: Boolean, default: false },
+    showList: { type: Boolean, default: true },
+    accept: { type: String, default: '' },
+    tip: { type: String, default: undefined },
+    listType: { type: String, default: 'picture-card' },
   },
   components: {},
   data: () => ({
@@ -54,20 +70,46 @@ export default {
   methods: {
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+      this.dialogVisible = false;
     },
-    handleRemove(file) {
-      return true;
+    handleRemove(file, fileList) {
+      let index = fileList.findIndex(f => _.isEqual(f, file));
+      this.$emit('delete', index);
+      return false;
     },
     outLimit() {
-      this.$message.error('只允许上传1张图片');
+      this.$message.error(`只允许上传${this.limit}个文件`);
     },
     onSuccess(response, file, fileList) {
       //将文件整理好传回父组件
-      this.$emit('upload', { type: this.type, data: response });
+      this.$emit('upload', { type: this.type, data: { ...response, name: file.name } });
+    },
+    beforeUpload(file) {
+      const sizeLimit = file.size / 1024 / 1024 < 10;
+      if (sizeLimit) return true;
+      else {
+        this.$message.error('文件超出10M！');
+        return false;
+      }
     },
     defalutProcess(val) {
-      this.$set(this, `fileList`, [{ name: this.type, url: `${this.data}?${new Date().getTime()}` }]);
+      if (typeof val === 'object' && _.get(val, length) !== undefined && val.length > 0) {
+        let newArr = [];
+        val.map(item => {
+          let object = {};
+          object.name = item.name;
+          object.url = `${item.uri}`;
+          newArr.push(object);
+        });
+        this.$set(this, `fileList`, newArr);
+      } else if (typeof val === 'object' && _.get(val, length) === undefined) {
+        let object = {};
+        object.name = val.name;
+        object.url = `${val.uri}`;
+        this.$set(this, `fileList`, [object]);
+      } else if (typeof val === 'string') {
+        this.$set(this, `fileList`, [{ name: '附件', url: val }]);
+      }
     },
   },
 };

src/layout/enterprise/contextfabu.vue

@@ -48,7 +48,16 @@
                   </el-col>
                 </el-row>
                 <el-form-item label="产品图片">
-                  <upload :limit="1" :data="demandForm.image.url" type="url" :url="'/files/image/upload'" @upload="uploadSuccess"></upload>
+                  <!-- <upload :limit="1" :data="acc.url" type="url" :url="'/files/image/upload'" @upload="uploadSuccess"></upload> -->
+                  <upload
+                    :limit="6"
+                    :data="demandForm.image"
+                    :uploadBtn="true"
+                    type="image"
+                    :url="`/files/image/upload`"
+                    @upload="uploadSuccess"
+                    @delete="uploadDelete"
+                  ></upload>
                 </el-form-item>
                 <span v-if="totaltype == 0 || totaltype == 1">
                   <el-form-item label="产品参数">
@@ -135,6 +144,7 @@
 </template>
 
 <script>
+import _ from 'lodash';
 import upload from '@/components/upload.vue';
 export default {
   name: 'contextfabu',
@@ -186,8 +196,15 @@ export default {
       this.$forceUpdate();
     },
     uploadSuccess({ type, data }) {
-      this.$set(this.demandForm.image, `${type}`, data.uri);
+      let arr = _.get(this.demandForm, type);
+      if (arr !== undefined) {
+        this.demandForm[type].push({ name: data.name, url: data.image });
+      } else {
+        let newArr = [{ name: data.name, url: data.uri }];
+        this.$set(this.demandForm, `${type}`, newArr);
+      }
     },
+
     // 获取表格选中时的数据
     selectRow(val) {
       this.selectlistRow = val;
@@ -200,6 +217,12 @@ export default {
       this.product_args.unshift(list);
       this.rowNum += 1;
     },
+
+    uploadDelete(index) {
+      console.log(index);
+
+      this.demandForm.image.splice(index, 1);
+    },
     selectType(item) {
       this.$emit('changeType', item);
       // this.$set(this, `totaltype`, item);