logo

src/views/ApiUserView.vue

@@ -20,6 +20,17 @@
         <ElFormItem prop="name" label="名称">
             <ElInput v-model="model.name" placeholder="请输入名称" />
         </ElFormItem>
+        <ElFormItem prop="logo" label="logo">
+            <img v-if="model.logo" :src="model.logo" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <ElUpload class="upload" action="http://localhost:3000/api/file/upload" :show-file-list="false"
+                :on-success="handleSuccess" :before-upload="beforeUpload">
+                <div class="el-button el-button--primary">修改logo</div>
+            </ElUpload>
+        </ElFormItem>
+        <ElFormItem prop="company" label="公司">
+            <ElInput v-model="model.company" placeholder="请输入公司名称" />
+        </ElFormItem>
         <ElFormItem prop="desc" label="描述">
             <ElInput v-model="model.desc" placeholder="请输入描述" />
         </ElFormItem>
@@ -102,4 +113,25 @@ function getToken(row) {
         ElMessage.success('复制成功')
     })
 }
+function handleSuccess(response, file, fileList) {
+    model.value.logo = response.url
+    const input = document.querySelector('.el-upload__input')
+    input.value = ''
+    const preview = document.querySelector('.avatar')
+    preview.src = response.url
+}
+function beforeUpload(file) {
+    const isJPG = file.type === 'image/jpeg'
+    const isPNG = file.type === 'image/png'
+    if (!isJPG && !isPNG) {
+        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
+        return false
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2
+    if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+        return false
+    }
+    return true
+}
 </script>