nodeJs与elementUI实现多图片上传

这个问题网上有很多,但是很多都是水.

这里我记录下我的实现方式!

node 服务端

import formidable from 'formidable'

/**
 * 图片
 */
router.post('/api/user/addItem', (req, res) => {

  // 增加数据
  // 获取客户端传过来的商品信息
  const form = new formidable.IncomingForm();
  form.uploadDir = config.uploadsGoodsPath;  // 上传图片放置的文件夹
  form.keepExtensions = true; // 保持文件的原始扩展名

  form.parse(req, (err, fields, files)=>{
    if(err){
      return next(err);
    }
    console.log(fields)
    let title = fields.title;
    let link = fields.link;
    let arr = JSON.parse(fields.arrs_num);
    console.log(arr.length,11111111)
    let picUrl=[]
    for(let i =0;i<arr.length;i++){
      console.log(i,'aaaaaaaa')
      picUrl.push('http://localhost:' + config.port + '/uploads/' + basename(files[`product_img_${i}`].path))
    }
    // let picUrl = 'http://localhost:' + config.port + '/uploads/' + basename(files['product_img_0'].path);
    console.log(picUrl)


  });
});

前端 

html部分就 不放了elementUI 里面的upload组件

      <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="5"
            :on-change="handleChange"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>

    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          this.temp.author = 'vue-element-admin'
          this.temp.images=this.fileList.length>0?this.fileList:''
            console.log(this.fileList[0].raw)
          if(!this.temp.images){
            this.$message({
              message: '图片没传',
              type: 'error'
            })
            return false
          }
          let formData = new FormData();
          let arrs_num = []

            for(let i = 0;i<this.fileList.length;i++){
              formData.append('product_img_'+i, this.fileList[i].raw);
              arrs_num.push(0)
            }
            console.log(arrs_num)
          formData.append('title', this.temp.title);
          formData.append('arrs_num', JSON.stringify(arrs_num));
          formData.append('link', this.temp.link);
          addItems(formData).then((res) => {
            this.dialogFormVisible = false
            this.getList()
          })
        }
      })
    },
    handleChange(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.fileList = fileList;
    },