前端文件上传

单文件上传

前端

      try {
        let formData = new FormData();
        formData.append('file', this.file);
        formData.append('filename', this.file.name);
        formData.append('id', 4);
        data = await instance.post('/sbcl/upload_single', formData);
        if (+data.code === 0) {
          this.fileUrl = data.servicePath
          this.$message.success('文件上传成功')
          return;
        }
        throw data.codeText;
      } catch (err) {
        this.$message.error(data.codeText);
      } finally {
        this.isRun = false
        this.file = null
      }

 node后台

基于multiparty插件实现文件上传处理 & form-data解析

const db = require('../../db/index')
const multiparty = require('multiparty')
// 基于multiparty插件实现文件上传处理 & form-data解析

const uploadDir = `${__dirname}/upload`;
const PORT = 5000,
    HOST = 'http://127.0.0.1',
    HOSTNAME = `${HOST}:${PORT}`;
const multiparty_upload = function multiparty_upload (req, auto) {
    typeof auto !== "boolean" ? auto = false : null;
    let config = {
        maxFieldsSize: 200 * 1024 * 1024,
    };
    console.log(__dirname);
    if (auto) config.uploadDir = uploadDir;
    return new Promise(async (resolve, reject) => {
        // 设置文件暂存地址
        new multiparty.Form(config)
            .parse(req, (err, fields, files) => {
                if (err) {
                    reject(err);
                    return;
                }
                resolve({
                    fields,
                    files
                });
            });
    });
};
//根据id更新申报材料文件信息
exports.addFile = async (req, res) => {

    try {
        let {
            files,
            fields,
        } = await multiparty_upload(req, true);
        const id = fields.id 
        let file = (files.file && files.file[0]) || {};
        let url = file.path.replace(__dirname, `${HOSTNAME}/router_handler/sbcl`)
        const sql = 'update sbcl_cate set fileValue=? where id=?'
        db.query(sql, [url, id], (err, results) => {
            if (err) return res.cc()
            res.send({
                code: 0,
                codeText: 'upload success',
                originalFilename: file.originalFilename,
                servicePath:url
            });
        })

    } catch (err) {
        console.log(err);
        res.send({
            code: 1,
            codeText: err
        });
    }
}

上传进度管控

<template>
  <div>
    <div class="container">
      <section
        class="upload_box"
        id="upload"
      >
        <input
          type="file"
          class="upload_inp"
          @change="uploadFile($event)"
        >
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          :loading="isRun"
          @click="selectFile"
        >选择文件</el-button>
        <el-button
          type="success"
          icon="el-icon-upload"
          size="small"
          :loading="isRun"
          @click="uploadServer"
        >上传文件</el-button>
        <el-button
          icon='el-icon-tickets'
          type="success"
          size="small"
          :loading="isRun"
          @click="showHandle"
        >文章预览</el-button>
        <div class="upload_list">
        </div>
        <div class="upload_progress">
          <div class="value"></div>
        </div>
      </section>
    </div>

    <div v-show="show">
      <!-- pdf文件 -->
      <div>
        <iframe
          id="iframe"
          ref="printIframe"
          width="950"
          height="800"
          :src="fileUrl"
        >
        </iframe>
        <p>如果您无法在线浏览此 PDF 文件，则可以</p>
        <p>下载 <a
            :href="fileUrl"
            target="_blank"
            style="color: blue;"
          >PDF 文件</a></p>
      </div>
    </div>
  </div>

</template>

<script>
import instance from './index'
export default {
  props: {
    "_id": {
      type: Number,
    },
    "type": {
      type: String,
    },
  },
  data () {
    return {
      isRun: false，
      file: [],
      fileUrl: '',
      show: false
    }
  },
  methods: {
    showHandle () {
      if (!this.fileUrl) return;
      this.show = !this.show
    },
    selectFile () {
      let upload_inp = document.querySelector('.upload_inp')
      upload_inp.click()
    },
    uploadFile (e) {
      this.file = e.target.files[0];
      if (!this.file) return;
      let upload_list = document.querySelector('.upload_list')
      upload_list.style.display = 'block';
      upload_list.innerHTML = `${this.file.name}`
    },
    async uploadServer () {
      let upload_progress = document.querySelector('.upload_progress'),
        upload_progress_value = upload_progress.querySelector('.value'),
        upload_list = document.querySelector('.upload_list'),
        data;
      upload_list.style.display = 'none'
      upload_list.innerHTML = ''
      if (!this.file) return this.$message.error('请上传文件');
      //上传文件中
      this.isRun = true

      try {
        let formData = new FormData();
        formData.append('file', this.file);
        formData.append('filename', this.file.name);
        formData.append('id', 4);
        data = await instance.post('/sbcl/upload_single', formData, {
          // 文件上传中的回调函数 xhr.upload.onprogress
          onUploadProgress (ev) {
            let {
              loaded,
              total
            } = ev;
            upload_progress.style.display = 'block';
            upload_progress_value.style.width = `${loaded / total * 100}%`;
          }
        });
        console.log(data);
        if (+data.code === 0) {
          upload_progress_value.style.width = `100%`;
          this.fileUrl = data.servicePath
          this.$message.success('文件上传成功')
          return;
        }
        throw data.codeText;
      } catch (err) {
        this.$message.error(data.codeText);
      } finally {
        this.isRun = false
        this.file = null
        upload_progress.style.display = 'none';
        upload_progress_value.style.width = `0%`;
      }


    }
  }
}
</script>

<style scoped>
.upload_box {
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  width: 400px;
  min-height: 150px;
  border: 1px dashed #ddd;
}
.upload_inp {
  display: none;
}
.upload_box .upload_progress {
  display: none;
}
.upload_box .upload_progress {
  margin-top: 10px;
  position: relative;
  height: 5px;
  background: #eee;
}
.upload_box .upload_progress .value {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  height: 100%;
  width: 0%;
  background: #67c23a;
  transition: width 0.3s;
}
.upload_box .upload_list {
  display: none;
  margin-top: 10px;
}

.upload_box .upload_list li {
  line-height: 25px;
  font-size: 0;
}

.upload_box .upload_list li span {
  display: inline-block;
  margin-right: 10px;
  max-width: 70%;
  color: #999;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>

拖拽上传

......

多文件上传

......

大文件切片上传

......