1

admin/src/views/qa/qa.vue

@@ -51,17 +51,39 @@
         <el-form-item label="QA内容">
           <el-input v-model="anchors.content" :rows="6" style="height: 120px" type="textarea" placeholder="QA内容" />
         </el-form-item>
-        <el-form-item label="上传行程">
+        <!-- <el-form-item label="上传行程">
           <el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
           <span style="color: #C03639">(只接受压缩包)</span>
         </el-form-item>
         <el-form-item label="上传图片">
           <el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
           <span style="color: #C03639">(只接受压缩包)</span>
-        </el-form-item>
+        </el-form-item> -->
         <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>
@@ -92,6 +114,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>
@@ -124,6 +168,8 @@ export default {
       dialogCreate: false,
       dialogEdit: false,
       item: {},
+      imageUrl:'',
+      imageUrls:'',
       anchors: {},
       getQaCitys: {}
     }
@@ -145,6 +191,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 = {} // 初始化时默认排序值为0
       this.dialogCreate = true
@@ -209,4 +262,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>