vue3.2图片上传Demo搭建 2 图片模拟模拟数据

最新推荐文章于 2023-02-07 17:42:14 发布

长沙xtt

最新推荐文章于 2023-02-07 17:42:14 发布

阅读量2.3k

点赞数

分类专栏： vue3 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_40746230/article/details/124846757

版权

vue3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

pages/MyFiles.vue

<template>
    <div class="container py-3">
        <ActionsBar />
        <div class="d-flex justify-content-between  align-items-center  py-2">
            <h6 class="text-muted mb-0">文件</h6>
            <button class="rounded-button">
                <icon-arrow-up />
            </button>
        </div>

        <div class="row">
            <!-- 图片效果-->
            <div class="col-md-3" v-for="(item, index) in 6" :key="index">
                <div class="card mb-4">
                    <img class="file-thumb" v-if="true" src="https://picsum.photos/id/1015/400/160" />
                    <div v-else class="card-body text-center py-5">
                        <icon-type-common height="4em" width="4em" />
                    </div>
                    <div class="card-footer">
                        <div class="d-flex align-items-center">
                            <icon-type-commion />
                            <span class="file-name">File 8.png</span>
                        </div>
                    </div>
                </div>
            </div>
  <!-- 图片效果-->

        </div>



    </div>

</template>
<script setup>
import ActionsBar from '../components/ActionsBar.vue'

</script>

<style>
</style>

安装 npm i -D json-server multer concurrently -D//仅在开发模式下使用的

json-server@0.17.0 用来模拟数据
+ multer@1.4.4 //上传图片的插件。
+ concurrently@7.2.0 //实现前后端连载

根目录创建数据模拟 server/db.json

{
"files":[
{
"id":1,
"name":"1.jpg",
"url":"地址"，
 "path": "",
"mimeType":"image/jpeg"

}



]


}

新建文件夹 server/uploads

启动数据开启新终端 json-server server/db.json --watch --port=3031

新建index.js

const jsonServer = require("json-server");

const path = require("path");

const cors = require("cors");

var multer = require("multer");
// const { off } = require("process");

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        //文件储存地址 uploads
        cb(null, path.join(__dirname, "./uploads"));
    },
    filename: function (req, file, cb) {
        const fileName = file.originalname.toLowerCase().split("").join("-");
        cb(null, fileName);
    },


});

var upload = multer({
    storage,
    fileFilter: validateFileType,
}).single("file");

const server = jsonServer.create();

const router = jsonServer.router(path.join(__dirname, "db.json"));

const middlewares = jsonServer.defaults();

const port = 3031;

server.options("*", cors());
server.post("/files", upload, function (req, res, next) {
    const host = "http://localhost:" + port;
    req.body.name = req.file.originalname;
    req.body.mimeType = req.file.mimetype;
    req.body.url = host + "/uploads/" + req.file.filename;
    req.body.path = req.file.path;
    req.body.createdAt = Date.now();
    next();
});

server.delete("/files/:id", (req, res, next) => {
    const fs = require("fs");
    const file = router.db.get("files")
        .findKey({ id: parseInt(req.params.id) })
        .value();
    try {
        fs.unlinkSync(file.path);

    } catch (err) {
        console.error(err);

    }
    next();
});

server.use(middlewares);
server.use(router);
server.listen(
    port, () => {
        console.log("JSON Server is  running at port", port);
    }
);

function validateFileType(req, file, cb) {
    if (!file.originalname.match(/\.(jpg|jpeg|png|gif|doc|docx|pdf|xls|xlsx)$/)) {
        return cb(new Error("您尝试上传的文件不合法"));
    }
    cb(null, true);
}

启动 node server/index.js

同时启动前端和后端配置 package.json

{
  "name": "vue-drive",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "api":"node server/index",
    "start": "concurrently \"npm  run api\"\"npm run dev\""  
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "concurrently": "^7.2.0",
    "json-server": "^0.17.0",
    "multer": "^1.4.4",
    "vite": "^2.9.9"
  }
}

npm run start