1

admin/src/views/qa/qa.vue

@@ -44,6 +44,28 @@
         <el-form-item label="状态">
           <el-switch v-model="anchors.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
         </el-form-item>
+        <el-form-item label="上传图片">
+          <el-upload
+            class="avatar-uploader"
+            action="admin/index/avatar"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+          >
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+        </el-upload>
+        </el-form-item>
+        <el-form-item label="上传行程">
+          <el-upload
+            class="avatar-uploader"
+            action="admin/index/avatar"
+            :show-file-list="false"
+            :on-success="handleSuccess"
+          >
+            <img v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+        </el-upload>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button v-loading="loading" type="primary" @click="onSave">保 存</el-button>
@@ -64,6 +86,28 @@
         <el-form-item label="状态">
           <el-switch v-model="anchors.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
         </el-form-item>
+        <el-form-item label="上传图片">
+          <el-upload
+            class="avatar-uploader"
+            action="admin/index/avatar"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+          >
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+        </el-upload>
+        </el-form-item>
+        <el-form-item label="上传行程">
+          <el-upload
+            class="avatar-uploader"
+            action="admin/index/avatar"
+            :show-file-list="false"
+            :on-success="handleSuccess"
+          >
+            <img v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+        </el-upload>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button v-loading="loading" type="primary" @click="onSave">保 存</el-button>
@@ -96,6 +140,8 @@ export default {
       dialogCreate: false,
       dialogEdit: false,
       item: {},
+      imageUrl:'',
+      imageUrls:'',
       anchors: {}
     }
   },
@@ -115,6 +161,13 @@ export default {
         this.listLoading = false
       })
     },
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw)
+      console.log(this.imageUrl);
+    },
+    handleSuccess(res, file) {
+      this.imageUrls = URL.createObjectURL(file.raw)
+    },
     onAdd() {
       this.anchors = { sort: 0 } // 初始化时默认排序值为0
       this.dialogCreate = true
@@ -172,4 +225,24 @@ export default {
 .search {
   margin-left: 10px;
 }
+.avatar-uploader .el-upload {
+  border: 1px solid #131313;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  border: 1px solid #979797;
+  border-radius: 15px;
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+}
 </style>