update

components/upload.vue

@@ -9,12 +9,16 @@
       :limit="limit"
       :on-exceed="outLimit"
       :on-preview="handlePictureCardPreview"
-      :on-remove="handleRemove"
+      :before-remove="handleRemove"
       :on-success="onSuccess"
+      :before-upload="beforeUpload"
       :show-file-list="showList"
       :accept="accept"
     >
       <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>
@@ -23,6 +27,14 @@
       </template>
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
+      <el-form :model="form" size="mini" label-width="80px" :inline="true">
+        <el-form-item label="文件名">
+          <el-input v-model="form.name" placeholder="若需要修改名称,请在此处输入后点击保存" style="width:300px"></el-input>
+        </el-form-item>
+        <el-form-item label="">
+          <el-button type="primary" @click="toChangeName">保存</el-button>
+        </el-form-item>
+      </el-form>
       <img width="100%" :src="dialogImageUrl" alt="" />
     </el-dialog>
   </div>
@@ -38,8 +50,9 @@ export default {
     data: { type: null },
     type: { type: String },
     isBtn: { type: Boolean, default: false },
+    uploadBtn: { type: Boolean, default: false },
     showList: { type: Boolean, default: true },
-    accept: { type: String },
+    accept: { type: String, default: '' },
     tip: { type: String, default: undefined },
     listType: { type: String, default: 'picture-card' },
   },
@@ -48,6 +61,7 @@ export default {
     dialogVisible: false,
     dialogImageUrl: '',
     fileList: [],
+    form: {},
   }),
   created() {
     if (this.data) {
@@ -57,29 +71,46 @@ export default {
   watch: {
     data: {
       handler(val) {
+        console.log('in function:');
         this.defalutProcess(val);
       },
+      deep: true,
     },
   },
   computed: {},
   methods: {
     handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
+      let uri = _.get(file, 'uri', _.get(file, 'url', _.get(file.response, 'uri', _.get(file.response, 'url'))));
+      this.dialogImageUrl = uri;
       this.dialogVisible = true;
     },
-    handleRemove(file) {
-      this.$emit('upload', { type: this.type, data: 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;
+      }
+    },
+    toChangeName() {
+      this.$emit('changeName', { uri: this.dialogImageUrl, name: this.form.name, type: this.type });
+      this.dialogVisible = false;
+      this.$forceUpdate();
     },
     defalutProcess(val) {
-      if (typeof val === 'object' && _.get(val, length) !== undefined && val.length > 0) {
+      if (_.isArray(val)) {
         let newArr = [];
         val.map(item => {
           let object = {};
@@ -88,7 +119,7 @@ export default {
           newArr.push(object);
         });
         this.$set(this, `fileList`, newArr);
-      } else if (typeof val === 'object' && _.get(val, length) === undefined) {
+      } else if (_.isObject(val)) {
         let object = {};
         object.name = val.name;
         object.url = `${val.uri}`;

components/upload_old.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="upload">
+    <el-upload
+      v-if="url"
+      ref="upload"
+      :action="url"
+      :list-type="listType"
+      :file-list="fileList"
+      :limit="limit"
+      :on-exceed="outLimit"
+      :on-preview="handlePictureCardPreview"
+      :on-remove="handleRemove"
+      :on-success="onSuccess"
+      :show-file-list="showList"
+      :accept="accept"
+    >
+      <el-button size="small" type="primary" v-if="isBtn">点击上传</el-button>
+      <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="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'upload',
+  props: {
+    url: { type: null },
+    limit: { type: Number },
+    data: { type: null },
+    type: { type: String },
+    isBtn: { type: Boolean, default: false },
+    showList: { type: Boolean, default: true },
+    accept: { type: String },
+    tip: { type: String, default: undefined },
+    listType: { type: String, default: 'picture-card' },
+  },
+  components: {},
+  data: () => ({
+    dialogVisible: false,
+    dialogImageUrl: '',
+    fileList: [],
+  }),
+  created() {
+    if (this.data) {
+      this.defalutProcess(this.data);
+    }
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.defalutProcess(val);
+      },
+    },
+  },
+  computed: {},
+  methods: {
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleRemove(file) {
+      this.$emit('upload', { type: this.type, data: file });
+      return true;
+    },
+    outLimit() {
+      this.$message.error('只允许上传1个文件');
+    },
+    onSuccess(response, file, fileList) {
+      //将文件整理好传回父组件
+      this.$emit('upload', { type: this.type, data: response });
+    },
+    defalutProcess(val) {
+      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 }]);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>