添加图片

src/views/recodeManager/modals/appeal.vue

@@ -1,7 +1,26 @@
 <template>
   <div>
-    <el-form :model="form" ref="form">
+    <el-form :model="form" ref="form" label-width="80px">
       <el-form-item
+        label="申述图片"
+        prop="url"
+      >
+        <div style="width: 100%;">
+          <el-upload
+            action="/api-web/uploadFile"
+            class="avatar-uploader"
+            :headers="headers"
+            :on-success="handleSuccess"
+            accept=".jpg, .jpeg, .png"
+            :show-file-list="false"
+          >
+            <img v-if="form.url" :src="form.url" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </div>
+      </el-form-item>
+      <el-form-item
+        label="申述内容"
         prop="content"
         :rules="[{required: true, message: '请输入申诉内容'}]"
       >
@@ -20,16 +39,26 @@
 </template>
 <script>
 import { addComplaints } from '../api'
+import {
+  getToken
+} from '@/utils/auth'
 export default {
   props: ['detail'],
   data() {
     return{
+      headers: {
+        Authorization: getToken()
+      },
       form: {
-        content: ''
+        content: '',
+        url: '',
       }
     }
   },
   methods: {
+    handleSuccess(res) {
+      this.$set(this.form, 'url', res.data.url)
+    },
     submit() {
       this.$refs.form.validate(async valid => {
         if (valid) {
@@ -49,3 +78,28 @@ export default {
   }
 }
 </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: 78px;
+    height: 78px;
+    line-height: 78px;
+    text-align: center;
+  }
+  .avatar {
+    width: 78px;
+    height: 78px;
+    display: block;
+  }
+</style>