前端

unimall-admin/src/views/aboutUsInfo/index.vue

@@ -124,10 +124,30 @@
           <el-input v-model="form.deputyTitle" placeholder="请输入副标题" />
         </el-form-item>
         <el-form-item label="封面图片" prop="coverImage">
-          <el-input v-model="form.coverImage" type="textarea" placeholder="请输入内容" />
+          <el-upload
+          ref="mYupload"
+          class="avatar-uploader"
+          :headers="headers"
+          :action="uploadPath"
+          :show-file-list="false"
+          :on-success="uploadSuccessHandle"
+          :before-upload="onBeforeUpload">
+            <img v-if="form.coverImage" :src="form.coverImage" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
         </el-form-item>
         <el-form-item label="视频地址" prop="videoUrl">
-          <el-input v-model="form.videoUrl" type="textarea" placeholder="请输入内容" />
+          <el-upload
+          ref="mYupload"
+          class="avatar-uploader"
+          :headers="headers"
+          :action="uploadPath"
+          :show-file-list="false"
+          :on-success="uploadSuccessHandle"
+         >
+            <img v-if="form.videoUrl" :src="form.videoUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
         </el-form-item>
         <el-form-item label="分类" prop="classify">
           <el-input v-model="form.classify" placeholder="请输入分类" />
@@ -138,33 +158,10 @@
         <el-form-item label="详情" prop="details">
           <el-input v-model="form.details" type="textarea" placeholder="请输入内容" />
         </el-form-item>
-        <el-form-item label="语言" prop="language">
-          <el-input v-model="form.language" placeholder="请输入语言" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-radio-group v-model="form.status">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="" prop="gmtCreate">
-          <el-date-picker clearable size="small" style="width: 200px"
-            v-model="form.gmtCreate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="" prop="gmtUpdate">
-          <el-date-picker clearable size="small" style="width: 200px"
-            v-model="form.gmtUpdate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="删除标识" prop="deleteFlag">
-          <el-input v-model="form.deleteFlag" placeholder="请输入删除标识" />
-        </el-form-item>
+        <el-radio-group v-model="form.language">
+        <el-radio-button label="中文"></el-radio-button>
+        <el-radio-button label="English"></el-radio-button>
+      </el-radio-group>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -176,10 +173,12 @@
 
 <script>
 import { listAboutUsInfo, getAboutUsInfo, delAboutUsInfo, addAboutUsInfo, updateAboutUsInfo, exportAboutUsInfo } from "@/api/cloud/aboutUsInfo";
-
+import { uploadPath } from '@/api/storage'
+import { getToken } from '@/utils/auth'
 export default {
   data() {
     return {
+      uploadPath,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -217,23 +216,44 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        coverImage: [
-          { required: true, message: "封面图片不能为空", trigger: "blur" }
-        ],        videoUrl: [
-          { required: true, message: "视频地址不能为空", trigger: "blur" }
-        ],        gmtCreate: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],        gmtUpdate: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],        deleteFlag: [
-          { required: true, message: "删除标识不能为空", trigger: "blur" }
-        ]      }
+         }
     };
   },
+  computed: {
+    headers() {
+      return {
+        accessToken: getToken()
+      }
+    }
+  },
   created() {
     this.getList();
   },
   methods: {
+    // 上传图片了处理图片
+    uploadSuccessHandle(e, file) {
+        const that = this
+        this.form.coverImage = e.url
+        this.$forceUpdate()
+      },
+      onBeforeUpload(file) {
+        const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
+        const isLt1M = file.size / 1024 / 1024 < 1
+
+        if (!isIMAGE) {
+          this.$message.error('上传文件只能是图片格式!')
+        }
+        if (!isLt1M) {
+          this.$message.error('上传文件大小不能超过 1MB!')
+        }
+        return isIMAGE && isLt1M
+      },
+      // 上传图片了处理图片
+    uploadSuccessHandle1(e, file) {
+        const that = this
+        this.form.videoUrl = e.url
+        this.$forceUpdate()
+      },
     /** 查询记录关于我们信息列表 */
     getList() {
       this.loading = true;
@@ -356,4 +376,32 @@ export default {
     }
   }
 };
-</script>
+</script>
+<style lang="scss" scoped>
+.avatar-uploader{ 
+  /deep/.el-upload {
+    border: 1px dashed #ccc;
+    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;
+}
+</style>