多图片文件的上传

在上传文件时,有时候会遇到想要多种类型图片的区分上传

例:在做商品管理上传时,想在提交时,上传缩略图一类,详细信息图一类,而这两块在提交的时候,如果不区分开的话,提交时会全部发到后台,而不能产生区分(功能点是在后端对前端页面提供一个http地址直接通过地址访问图片,而缩略图所在的部分和详细图所在的部分是分开存储的,所以要区分上传)

实现方法:

前端:

①在图片的上传时就需要区分,在react中就在state中分开独立创建数组去存储想要上传的图片,vue则是在data中分开创建数组

let data = JSON.parse(JSON.stringify(this.state.addInfo));
    data['price'] = Number(data.price);
    data['marketPrice'] = Number(data.marketPrice);
    data['stock'] = Number(data.stock);
    // message.success('添加成功');
    handleAddGoods({
      imgfiles: this.state.thumbnailList,
      files: this.state.fileList,
      addInfo: data,
    }).then(response => {
      console.log(response);
      setTimeout(() => {
        this.setState({
          loading: false,
        });
        message.success('添加成功');
        setTim