動態

詳情 返回 返回

Koa2實現多併發文件上傳 - 動態 詳情

koa2批量上傳文件

目前的是為了實現批量導入md文件,發佈文章。這樣就不用自己一篇一篇同步文章了。一次可以同步幾千篇文章。

實現界面

內容

主要包含上傳的文件標題,文件大小,上傳狀態。

      <el-upload ref="uploader" v-model:file-list="fileList" drag multiple :accept="accept" :maxSize="maxSize"
        :limit="999" :data="data" :show-file-list="false" :http-request="request" :before-upload="before"
        :on-progress="progress" :on-success="success" :on-error="error" @handleChange="handleChange">
        <slot name="uploader">
          <div class="el-upload__text">將文件拖到此處或 <em>點擊選擇文件上傳</em></div>
        </slot>
        <template #tip>
          <div class="el-upload__tip">
            <p v-if="templateUrl" style="margin-top: 7px">
              <el-link :href="templateUrl" target="_blank" type="primary" :underline="false">下載導入模板</el-link>
            </p>
          </div>
        </template>
      </el-upload>

這個採用自定義上傳

        request(param) {
            const data = new FormData()
            data.append(param.filename, param.file)
            for (const key in param.data) {
                data.append(key, param.data[key])
            }
            uploadFiles(data).then((res) => {
                var reader = new FileReader()
                reader.readAsText(param.file, 'UTF-8')
                reader.onload = function(e) {
                    var content = e.target.result
                    param.onSuccess(content)
                }
            }).catch((err) => {
                param.onError(err)
            })
        }

koa2實現接口uploadFiles,文件多線程上傳文件

  async uploadFiles(ctx) {
    const files = ctx.request.files || {};
    if (!files || Object.keys(files).length === 0) {
      ctx.status = 400;
      ctx.body = "請選擇的上傳文件";
      return;
    }
    const uploadPromises = Object.values(files).map(async (file) => {
      const reader = fs.createReadStream(file.path);
      const stream = fs.createWriteStream(`uploads/${file.name}`);
      const content = fs.readFileSync(file.path, 'utf8');
      reader.pipe(stream);
      return new Promise((resolve, reject) => {
        reader.on("end", async () => {
          fs.unlinkSync(file.path); // Delete the temporary file
          resolve({ name: file.name, status: 'uploaded' });
        });
        //content為讀取上傳文件的內容
        //此處存入數據庫中
        //數據庫已經處理了轉義字符存儲的問題
        reader.on("error", (err) => {
          reject(err);
        });
      });
    });

    try {
      const data = await Promise.all(uploadPromises);
      ctx.body = {
        code: 0,
        data: data,
      };
    } catch (err) {
      ctx.code = -1;
      ctx.body = "文件上傳失敗";
    }
  }

處理md文件存儲時,mysql存儲特殊字符轉義問題

  async insert(params, table) {
    let columns = "";
    let values = "";
    for (const key in params) {
      columns += `${key}, `;
      values += `${mysql.escape(params[key])}, `;
    }
    columns = columns.slice(0, -2);
    values = values.slice(0, -2);
    return await query(`INSERT INTO ${table} (${columns}) VALUES (${values})`);
  }

選中多個文件上傳

地址

演示地址

user avatar savokiss 頭像 zxl20070701 頭像 imba97 頭像 guixiangyyds 頭像 youyoufei 頭像 it1042290135 頭像 lovecola 頭像 ldh-blog 頭像 shuyuanutil 頭像 jinl9s27 頭像 chen_christins 頭像 hsr2022 頭像
點贊 38 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.