第一步 在vue.cofing.js里面

const {
  defineConfig
} = require('@vue/cli-service');

const Path = require('path');
// 定義路徑別名的方法
function resolve(dir) {
  return Path.join(__dirname, dir);
}

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //關(guān)閉嚴(yán)格模式
  // 設(shè)置路徑別名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@v', resolve('src/views'))
      .set('@c', resolve('src/components'))
      .set('@a', resolve('src/api'))
      .set('@s', resolve("src/store"))
  },

  // 跨域
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ""
        }
      }
    }
  }

})

第二部 在src寫(xiě)一個(gè)api文件 里面寫(xiě)文件的接口

import axios from "@/untils/axios/axios";


export default {
    // 添加商品信息
    async add(obj) {
        let res = await axios.post('/api/goods/add', obj);
        return res;
    },
    // 查詢(xún)商品
    async search(obj) {
        let res = await axios.get('/api/goods/search', obj);
        return res;
    },
    // 下架
    async down(obj) {
        let res = await axios.get('/api/goods/down', obj);
        return res;
    },
    // 上架
    async up(obj) {
        let res = await axios.get('/api/goods/up', obj);
        return res;
    },
    // 修改
    async update_(obj) {
        let res = await axios.get('/api/goods/update', obj);
        return res;
    },
}

3.當(dāng)我們使用它的時(shí)候

<template>
    <div class="goodsImg">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>相冊(cè)管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="cont">
            <div class="addImg">
                <el-button type="primary" @click="open" round>上傳圖片</el-button>
            </div>

            <div class="imgbox">

                <div class="showImg">
                    <div class="imgItem" v-for="v in imgList" :key="v.i_id">
                        <el-image style="width: 120px; height: 120px" :src="'/api/uploads/' + v.i_name" fit="contain">
                        </el-image>
                        <el-button :index="v.i_id" type="danger" @click="delete_($event)" plain>刪除</el-button>
                    </div>
                </div>

                <div class="pag">
                    <el-pagination @size-change="handleSizeChange" small background
                        @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
                        :page-size="page_sizes" layout="total, sizes, prev, pager, next, jumper" :total="totals">
                    </el-pagination>
                </div>
            </div>
        </div>

        <div class="typeMask" v-if="mask">
            <div class="typebox">
                <div class="typeTop">
                    <i class="el-icon-close" @click="close"></i>
                </div>

                <div class="addbox">
                    <el-upload action="/api/api/image/uploads" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@a/goodsImg.js';//掉接口文件
export default {
    name: 'GoodsImg',
    data() {
        return {
            mask: false,
            dialogImageUrl: '',
            dialogVisible: false,
            imgList: null,
            currentPage: 1,
            totals: null,
            page_sizes: 10,
        }
    },
    async beforeMount() {
        let res = await api.searchPag({
            offset: 0,
            limit: this.page_sizes,
        })
        console.log(res);
        this.totals = res.datas.count;
        this.imgList = res.datas.rows;
    },
    methods: {
        open() {
            this.mask = true;
        },
        async close() {
            this.mask = false;
            let res = await api.searchPag({
                offset: (this.currentPage - 1) * this.page_sizes,
                limit: this.page_sizes,
            })
            this.totals = res.datas.count;
            this.imgList = res.datas.rows
        },
        handleRemove(file, fileList) {
            // console.log(file.response.datas);
            let id_ = file.response.datas[0].i_id;
            id_ = parseInt(id_);
            // console.log(id_);
            // 從數(shù)據(jù)庫(kù)刪除圖片
            this.delimg(id_);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 刪除圖片的方法
        async delimg(id) {
            let res = await api.delImg({
                i_id: id
            })
            console.log(res);
        },
        async handleSizeChange(val) {
            console.log(`每頁(yè) ${val} 條`);
            this.page_sizes = val;

            let res = await api.searchPag({
                offset: (this.currentPage - 1) * this.page_sizes,
                limit: this.page_sizes,
            })
            this.totals = res.datas.count;
            this.imgList = res.datas.rows
        },
        async handleCurrentChange(val) {
            console.log(`當(dāng)前頁(yè): ${val}`);
            this.currentPage = val;
            let res = await api.searchPag({
                offset: (val - 1) * this.page_sizes,
                limit: this.page_sizes,
            })
            this.totals = res.datas.count;
            this.imgList = res.datas.rows
        },
        async delete_(e) {
            let id_ = e.target.getAttribute('index') || e.target.parentNode.getAttribute('index');
            id_ = parseInt(id_);
            // console.log(id_);
            this.delimg(id_);

            //掉接口
            let res = await api.searchPag({
                offset: (this.currentPage - 1) * this.page_sizes,
                limit: this.page_sizes,
            })
            this.totals = res.datas.count;
            this.imgList = res.datas.rows
        }
    }
}
</script>

<style scoped lang="less">
.typeMask {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;

    .typebox {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        background-color: #fff;
        border-radius: 10px;
        width: 70vw;
        height: 70vh;
        padding-top: 0px;

        .typeTop {
            height: 40px;
            font-size: 30px;
            overflow: hidden;
            line-height: 40px;
            padding: 10px;

            i {
                float: right;
                cursor: pointer;
            }
        }
    }

    .addbox {
        padding: 20px;
        padding-top: 0px;
    }
}

.imgbox {
    margin-top: 30px;

    .showImg {
        width: 100%;
        overflow: hidden;

        .imgItem {
            cursor: pointer;
            float: left;
            margin: 6px;
            text-align: center;

            .el-image {
                display: block;
                margin-bottom: 5px;
            }
        }
    }
}

.pag {
    text-align: center;
    margin-top: 20px;
}
</style>