add_collection

src/views/collection/addCollection.vue

@@ -5,36 +5,24 @@
     <div class="message-add-box">
       <el-form :model="message" :rules="rules" ref="form" label-width="100px">
       
-        <el-form-item label="消息标题:" prop="messageTitle">
-          <el-input v-model="message.messageTitle" placeholder="请输入消息标题"></el-input>
+        <el-form-item label="藏品名称:" prop="messageTitle">
+          <el-input v-model="message.messageTitle" style="width: 550px" placeholder="请输入藏品名称"></el-input>
         </el-form-item> 
       
-        <el-form-item label="发布时间:" required>
-          <!-- <el-col :span="11">
-            <el-form-item prop="dateTime">
-              <el-time-picker placeholder="选择时间" v-model="message.dateTime" style="width: 100%;"></el-time-picker>
-            </el-form-item>
-          </el-col> -->
-          <el-col :span="11">
-            <el-form-item prop="date1">
-              <el-date-picker type="date" placeholder="选择日期" v-model="message.date1" style="width: 100%;"></el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col class="line" :span="1.5">-</el-col>
-          <el-col :span="11">
-            <el-form-item prop="date2">
-              <el-time-picker placeholder="选择时间" v-model="message.date2" style="width: 100%;"></el-time-picker>
-            </el-form-item>
-         </el-col>
-        </el-form-item>
-
-        <el-form-item label="接受用户:" prop="receivedUsers">
-          <el-input type="textarea" :rows="2" placeholder="请导入用户" autosize v-model="message.receivedUsers"></el-input>
-        </el-form-item>  
-
-        <el-form-item label="消息内容:" prop="content">
-          <editor v-model="message.content" :min-height="192"/>
-        </el-form-item>
+        <el-form-item label="藏品头图:" prop="messageTitle">
+          <el-upload
+          class="avatar-uploader"
+          action="https://jsonplaceholder.typicode.com/posts/"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+          <i
+            v-else
+            class="el-icon-plus avatar-uploader-icon"
+          ></i> </el-upload>
+        </el-form-item> 
 
         <el-form-item>
           <el-button type="primary" @click="submitForm('form')">提交</el-button>
@@ -62,7 +50,8 @@ import {submitMessage} from '../../api/message/message.js'
           date2:'',
           receivedUsers: '',
           content: '请输入内容',
-          cnt : 1 
+          cnt : 1 ,
+          imageUrl: ''
         },
         rules: {
           messageTitle: [
@@ -94,6 +83,21 @@ import {submitMessage} from '../../api/message/message.js'
     console.log( "-****" , this.message.content);
   },
   methods: {
+        handleAvatarSuccess(res, file) {
+          this.imageUrl = URL.createObjectURL(file.raw);
+        },
+        beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
+      },
       change(){
         console.log(1);
         this.cnt = this.cnt+ 1  
@@ -166,6 +170,29 @@ import {submitMessage} from '../../api/message/message.js'
 </script>
 
 <style>
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
 .message-add-box{
   width: 60%;
   height: 100%;