nodejs文件上传

创建独立的uploadfile.js

var path = require('path')
var fs = require('fs')
module.exports = (file, dir) => {
    // console.log(file)
    //创建写入流
    const reader = fs.createReadStream(file.path)
        //以日期格式命名加随机数防止重名导致传入失败
    let date = new Date()
    let year = date.getFullYear().toString()
    let mouth = (date.getMonth() + 1).toString()
    let datetime = date.getDate().toString()
    let hours = date.getHours().toString()
    let minute = date.getMinutes().toString()
    let second = date.getSeconds().toString()
    let sw = Math.floor(Math.random() * 100).toString()
    let filenamesw = year + mouth + datetime + hours + minute + second + sw + '.png'
    let filePath = dir + `${filenamesw}`
        // 创建可写流
    const upStream = fs.createWriteStream(filePath)
        // 可读流通过管道写入可写流
    reader.pipe(upStream)

    return filenamesw

    // console.log(upStream, 'kk2')
}

index.js文件引入

var Router = require('koa-router')
var router = Router()
var uploadfile = require('../public/js/uploadfile.js')


router.post('/user/saveheadphoto', async(ctx, res) => {
        const file = ctx.request.files.file // 获取上传文件
        const dir = `${__dirname}/../public/upload/`
        let respath = uploadfile(file, dir)
            // console.log(file, 'kk')
        return (ctx.body = 'http://localhost:3000/upload/' + respath)
    })

vue+elementui使用

//elementui
<el-upload class="avatar-uploader" action="" :show-file-list="false" list-type="picture" style="display:inline-block" :http-request="uploadImage">
     <img v-if="formlist.imageurl" :src="formlist.imageurl" class="avatar" />
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

//方法
async uploadImage(obj) {
      let formData = new FormData()
      formData.set('file', obj.file)
      let data = await this.$http.post('/user/saveheadphoto', formData, {
        // 上传文件 请求头要设置成下面这样
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      this.formlist.imageurl = data.data
    },

weapp微信小程序使用

<demo-block title="文件预览" padding>
        <van-uploader name="2" max-count="1" file-list="{{ fileList }}" multiple bind:after-read="afterRead" bind:delete="delete" bind:click-preview="clickPreview" />
</demo-block>

//方法
 afterRead: function (event) { //上传
    var that = this;
    const {
      file
    } = event.detail;

    let {
      fileList
    } = this.data

    fileList.push({
      url: file[0].url
    })
    this.setData({
      fileList
    })    
    wx.uploadFile({
      url: ''http://localhost:3000' + `/saveheadphoto`, // 仅为示例，非真实的接口地址
      filePath: file[0].url,
      header: {
        "Content-Type": "multipart/form-data"
      },
      name: 'file',
      formData: {
        userid: wx.getStorageSync('userid')
      },
      success: (res) => {
        this.setData({
         imageurl: res.data,
        })
      },
    });
  },