1

src/views/collection/addcollections/index.vue

@@ -11,6 +11,13 @@
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </el-form-item> -->
+      <el-form-item label="藏品图片:" prop="avatar">
+        <el-upload class="avatar-uploader" action="http://localhost:80/dev-api/files/send" accept="image/*"
+          :show-file-list="false" :on-success="handleAvatarSuccess">
+          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
       <el-form-item label="藏品价格：" prop="price" style="width: 550px">
         <el-input v-model="ruleForm.price" show-word-limit>
           <template slot="append">￥</template>
@@ -21,7 +28,7 @@
           <template slot="append">份</template>
         </el-input>
       </el-form-item>
-      
+
       <el-form-item label="售卖时间：" prop="date" style="width: 550px">
         <el-date-picker v-model="ruleForm.date" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
           :default-time="['12:00:00']">
@@ -31,17 +38,18 @@
         <el-input type="textarea" v-model="ruleForm.desc" class="inputStore" :rows="15"></el-input>
       </el-form-item>
       <el-button type="primary" style="margin-left: 200px" @click="submitForm('ruleForm')">提交</el-button>
+      <el-button @click="resetForm('ruleForm')">重置</el-button>
     </el-form>
     <el-backtop :bottom="60">
       <div style="{
-              height: 100%;
-              width: 100%;
-              background-color: #f2f5f6;
-              box-shadow: 0 0 6px rgba(0,0,0, .12);
-              text-align: center;
-              line-height: 40px;
-              color: #1989fa;
-            }">
+                height: 100%;
+                width: 100%;
+                background-color: #f2f5f6;
+                box-shadow: 0 0 6px rgba(0,0,0, .12);
+                text-align: center;
+                line-height: 40px;
+                color: #1989fa;
+              }">
         top
       </div>
     </el-backtop>
@@ -57,10 +65,10 @@ export default {
         name: "",
         //  时间
         date: "",
-        // 上传图片
-        imageUrl: "",
         price: "",
         number: "",
+        // 头像
+        avatar: "",
         desc: ""
       },
       //表单验证
@@ -99,13 +107,6 @@ export default {
             trigger: "blur",
           },
         ],
-        // avatar: [
-        //   {
-        //     required: true,
-        //     message: "请按照规范上传尺寸为400px*400px的图片",
-        //     trigger: "blur",
-        //   },
-        // ],
         date: [
           {
             required: true,
@@ -124,7 +125,7 @@ export default {
           addCollections({
             addName: this.ruleForm.name,
             addDate: this.ruleForm.date,
-            // addImagUrl: this.ruleForm.imageUrl,
+            addAvatar: this.ruleForm.avatar,
             addDesc: this.ruleForm.desc,
             addPrice: this.ruleForm.price,
             addNumber: this.ruleForm.number
@@ -145,22 +146,30 @@ export default {
         }
       });
     },
-    // handleAvatarSuccess(res, file) {
-    //   console.log(res);
-    //   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;
-    // },
+    // 自定义上传头像 覆盖默认上传
+    handleUpload({ file }) {
+        const formData = new FormData();
+        formData.append("file", file);
+        // 调用上传头像接口
+        uploadAvatar(formData).then((res) => {
+          if (res.code === 200) {
+            // 如果返回状态码为200 将返回的头像地址赋值给表单头像字段
+            this.ruleForm.avatar = res.data;
+          }
+        });
+      },
+       // 上传头像成功
+       handleAvatarSuccess(res, file) {
+        this.$message({
+          type: 'success',
+          message: '上传成功!'
+        });
+        this.ruleForm.avatar = URL.createObjectURL(file.raw);
+      },
+      // 重置表单
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
   },
 };
 </script>

src/views/collection/collections/index.vue

@@ -16,14 +16,14 @@
                 </el-table-column>
                 <el-table-column prop="price" label="藏品价格（￥）" align="center" width="160">
                 </el-table-column>
-                <el-table-column prop="endTime" label="截止时间" align="center" width="160">
+                <el-table-column prop="endTime" label="截止时间" align="center" width="180">
                 </el-table-column>
-                <el-table-column prop="collectionsNumber" label="数量（份）" align="center" width="160">
+                <el-table-column prop="collectionsNumber" label="数量（份）" align="center" width="180">
                 </el-table-column>
                 <el-table-column fixed="right" label="操作" align="center" width="180">
                     <template slot-scope="scope">
-                        <el-button @click="handleDetail(scope.row)" type="primary" size="small">查看详情</el-button>
-                        <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
+                        <el-button @click="handleDetail(scope.row)" type="text" size="mini">查看详情</el-button>
+                        <el-button @click="handleDelete(scope.row)" type="text" size="mini">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>