nodejs+koa+vue實現上傳文件（圖片）到服務器以及刪除圖片

前言：

這兩天把小程序的頁面和小程序支付給解決掉了，當然啦微信支付也是前后端一塊寫的，以及支付成功回調函數等，當然了這篇記錄的不是微信支付，微信支付我會在一個完整的時間整理出來。這篇主要就是給大家講一下文件上傳刪除，這一片呢就以圖片上傳刪除為例。

好多人有一個誤區，特別是在網上搜了一大堆方法之后更是一頭霧水，今天就給大家介紹一下我使用的最簡單的方法。

技術點：

• vue+elementUi 使用el-upload上傳圖片
• nodejs + koa. 使用fs+koa-multer實現將圖片保存在服務器以及刪除圖片

一.vue+element使用el-upload上傳圖片

老樣子，話不多說先上圖：

 

 

在上代碼：

 

 

<el-upload
          action="/upload/friedChickensImg"
          list-type="picture-card"
          :limit="1"
          :on-preview="preview"
          :on-success="afterSuccessUpload"
          :before-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>

 

 

 

 

這里主要有幾個方法就是刪除呀預覽呀等等大家去官網一看便知！ 

其實前端處理很簡單只需要這幾行代碼就ok，我們具體來看后端代碼！

 

二.nodejs + koa. 使用fs+koa-multer實現將圖片保存在服務器以及刪除圖片

上傳成功：

 

 

 

刪除成功：

 

 

 

 

先看圖片我們跟能直觀的感受到，接下來

上代碼：

首先呢就是下載koa-multer,大家自行百度 npm i koa-multer --saver  , 接着配置參數

const multer = require('koa-multer');//加載koa-multer模塊

//文件上傳
var storage = multer.diskStorage({
  //文件保存路徑
  destination: function (req, file, cb) {
    cb(null, 'C:/friedChickens/friedChickensImg')
  },
  //修改文件名稱
  filename: function (req, file, cb) {
    var fileFormat = (file.originalname).split(".");
    cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
})
//加載配置
var upload = multer({ storage: storage });

直接復制代碼大家不要問那么多，不懂得可以留言，傻瓜式操作！

然后就是給前端提供一個接口簡簡單單三行代碼：

const multer = require('koa-multer');//加載koa-multer模塊

//文件上傳
var storage = multer.diskStorage({
  //文件保存路徑
  destination: function (req, file, cb) {
    cb(null, '/friedChickensImg')
  },
  //修改文件名稱
  filename: function (req, file, cb) {
    var fileFormat = (file.originalname).split(".");
    cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
})
//加載配置
var upload = multer({ storage: storage });
/* 上傳圖片 */
router.post('/friedChickensImg', upload.single('file'), async (ctx, next) => {
  ctx.body = {
    filename: ctx.req.file.filename,//返回文件名
    path:'/friedChickensImg'
  }
})

 

 這里大家需要注意一點的就是，圖片保存的路徑可以任意寫！

 

到此呢，你調用此接口就可以看到你的服務器成功的上傳了一張照片，🎉🎉🎉

然后就是

刪除圖片：

刪除圖片就直接給大家貼出來完整的代碼，不做過多的贅述！

    deleteFolderRecursive(url, name) {
        var files = [];

        if (fs.existsSync(url)) {    //判斷給定的路徑是否存在

            files = fs.readdirSync(url);    //返回文件和子目錄的數組

            files.forEach(function (file, index) {

                var curPath = path.join(url, file);

                if (fs.statSync(curPath).isDirectory()) { //同步讀取文件夾文件，如果是文件夾，則函數回調
                    deleteFile(curPath, name);
                } else {

                    if (file.indexOf(name) > -1) {    //是指定文件，則刪除
                        fs.unlinkSync(curPath);
                        console.log("刪除文件：" + curPath);
                    }
                }
            });
        } else {
            console.log("給定的路徑不存在！");
        }
    }

兩個參數，第一個是存放文件的路徑，第二個參數就是文件名稱！

代碼里有少量的注釋大家自行觀看！

至此呢刪除文件就大功告成。🎉🎉🎉

結束語：

我的隨筆呢大都以代碼為主，並且是測試可以正常使用，大家只要拿到項目里就可以直接使用，是不是很傻瓜？如果大家有不懂的可以留言或者是加我wx：18237266724，就到這里吧洗洗睡覺！！！