封装图片上传组件

admin/.eslintrc.cjs

@@ -18,7 +18,7 @@ module.exports = {
   ],
   rules: {
     'vue/multi-word-component-names': 0,
-    'space-before-function-paren': ['error', 'never'], // 函数名与括号之间无空格
+    'space-before-function-paren': 0,
     quotes: ['error', 'single'] // 单引号
   }
 }

admin/src/api/index.js

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: '/api',
+  timeout: 3000
+})
+
+export default api

admin/src/api/token.js

@@ -0,0 +1,7 @@
+import api from './index'
+
+export const getQiniuToken = () => {
+  return api({
+    url: '/token/qiniu'
+  })
+}

admin/src/utils/Upload.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-upload
+    class="avatar-uploader"
+    action="https://upload-z2.qiniup.com"
+    :show-file-list="false"
+    :http-request="up2qiniu"
+    :before-upload="beforeUpload"
+  >
+    <img
+      v-if="props.url"
+      :src="props.url"
+      class="avatar"
+      :style="'width: ' + props.width + 'px;' + 'height: ' + props.height + 'px;'"
+    />
+    <el-icon
+      v-else
+      class="avatar-uploader-icon"
+      :style="'width: ' + props.width + 'px;' + 'height: ' + props.height + 'px;'"
+      ><Plus
+    /></el-icon>
+  </el-upload>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getQiniuToken } from '../api/token'
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+
+const qiniuaddr = 'rlr92qkze.hn-bkt.clouddn.com'
+const imageUrl = ref('')
+// 父组件传值时，须有图片的url；其次可选择图片的宽高（默认都为180）
+const props = defineProps({
+  url: String,
+  width: {
+    type: Number,
+    default: 180
+  },
+  height: {
+    type: Number,
+    default: 180
+  }
+})
+const emit = defineEmits(['upload'])
+
+const beforeUpload = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
+    ElMessage.error('图片格式应该是png或jpg')
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片大小应该小于2MB')
+    return false
+  }
+  return true
+}
+
+/**
+ * 上传图片至七牛云
+ * @param {*} req
+ */
+const up2qiniu = async (req) => {
+  const config = {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  }
+  const fileType = req.file.type === 'image/png' ? 'png' : 'jpg'
+  // 重命名要上传的文件
+  const keyname = 'blog' + new Date().getTime() + '.' + fileType
+  const res = await getQiniuToken()
+  const formdata = new FormData()
+  formdata.append('file', req.file)
+  formdata.append('token', res.data)
+  formdata.append('key', keyname)
+  // 获取到凭证之后再将文件上传到七牛云空间
+  axios.post('https://upload-z2.qiniup.com', formdata, config).then((res) => {
+    imageUrl.value = 'http://' + qiniuaddr + '/' + res.data.key
+    emit('upload', imageUrl.value) // 向父组件传递图片的url
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar-uploader .avatar {
+  width: 360px;
+  height: 180px;
+  display: block;
+}
+.avatar-uploader :deep(.el-upload) {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader :deep(.el-upload:hover) {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 360px;
+  height: 180px;
+  text-align: center;
+}
+</style>

admin/src/views/article/Article.vue

@@ -1,36 +0,0 @@
-<template>
-  <el-card>
-    <el-form>
-      <el-form-item>
-        <el-row :gutter="20" style="width: 100%">
-          <el-col :span="20">
-            <span style="box-shadow: 1 0 1px #c0c4cc"
-              ><el-input v-model="blog.title" placeholder="请输入博客标题"
-            /></span>
-          </el-col>
-          <el-col :span="4">
-            <el-button color="#626aef" style="width: 100%; height: 100%">发布文章</el-button>
-          </el-col>
-        </el-row>
-      </el-form-item>
-      <el-form-item>
-        <v-md-editor
-          v-model="blog.article"
-          height="calc(100vh - 290px)"
-          placeholder="在vuepress主题中, 您可以使用tip功能噢~"
-        />
-      </el-form-item>
-    </el-form>
-  </el-card>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const blog = ref({
-  title: '',
-  article: ''
-})
-</script>
-
-<style lang="scss" scoped></style>

admin/src/views/article/ArticleList.vue

@@ -1,50 +0,0 @@
-<template>
-  <el-card>
-    <el-table :data="articleList" style="width: 100%">
-      <!-- 多选 -->
-      <el-table-column type="selection" width="55" />
-      <el-table-column prop="cover" label="文章图片">
-        <template #default="scope">
-          <el-image
-            class="article-cover"
-            :src="
-              scope.row.cover
-                ? scope.row.cover
-                : 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png'
-            "
-          />
-        </template>
-      </el-table-column>
-      <el-table-column prop="title" label="文章标题" />
-      <el-table-column prop="category" label="分类" />
-      <el-table-column prop="tags" label="标签" />
-      <el-table-column prop="views" label="浏览量" />
-      <el-table-column prop="type" label="类型" />
-      <el-table-column prop="createTime" label="发表时间" />
-      <el-table-column prop="updateTime" label="更新时间" />
-      <el-table-column label="操作">
-        <template #default="scope">
-          <el-button type="primary" @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
-          <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-card>
-</template>
-
-<script setup>
-const articleList = [
-  {
-    cover: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-6dqemx.jpg',
-    title: '测试',
-    category: '分类1',
-    tags: '标签1',
-    views: 0,
-    type: '原创',
-    createTime: '2022-11-17',
-    updateTime: '2022-11-17'
-  }
-]
-</script>
-
-<style lang="scss" scoped></style>

admin/vite.config.js

@@ -9,5 +9,14 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, 'src') // 利用@代替src
     }
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
   }
 })