react ant design upload 多个单文件上传


// 图片上传
  async handleUpload(file) {
    const formData = new FormData(); 
    formData.append("file", file); 
    this.setState({
      uploadLoading: true,
    });
    let res = await upload(formData);
    return res;
  }
  // 提交表单
  onFinish = async (values) => {
  	// 多个表单
    const { file, file2 } = this.state; // 多个文件上传去state里面设置
    // 后端返回是字符串,所以这里要判断是否需要上传
    if (file && file instanceof File) {
      let resUpload = await this.handleUpload(file); 
      if (resUpload && resUpload.code === 1) {
        // 重置表单
        this.setState({
          fileList: [],
          uploadLoading: false,
        });
        // 设置图片地址的值
        values = {
          ...values,
          xxx: resUpload.data.filePath, // xxx为你的图片字段
        };
        message.success("上传成功...");
      } else {
        this.setState({
          uploadLoading: false,
        });
        message.error("上传失败...");
        return false;
      }
    }
    // 第二张图片,依次类推
    if (file2 && file2 instanceof File) {
      let resUpload = await this.handleUpload(file2); 
      if (resUpload && resUpload.code === 1) { 
        this.setState({
          fileList2: [],
          uploadLoading: false,
        }); 
        values = {
          ...values,
          xxx2: resUpload.data.filePath,
        };
        message.success("上传成功...");
      } else {
        this.setState({
          uploadLoading: false,
        });
        message.error("上传失败...");
        return false;
      }
    }
	// ...coding
}

render() {
    const { uploadLoading, fileList, fileList2 } = this.state;
    // 新页面打开图片
    const open_win = (url) => {
      console.log(url)
      const img = new Image();
      img.src = url;
      const newWin = window.open("", "_blank");
      newWin.document.write(img.outerHTML);
      newWin.document.close();
    };
    let uploadProps = {
      listType: "picture",
      headers: {
        "access-token": window.localStorage.getItem("authToken"),
      },
      // withCredentials:true, // 携带cookies, 看项目是否需要
      fileList: [...fileList],
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          // 修改这里需要清空
          this.formRef.current.setFieldsValue({
            xxx: '' // 对应的字段
          })
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        // 使用 beforeUpload 會失去在選擇圖片後馬上看到圖片的功能,因此利用FileReader方法來實現預覽效果
        let reader = new FileReader();
        console.log(file)
        reader.readAsDataURL(file);
        reader.onloadend = function () {
          let url = reader.result;
          this.setState({fileList: [{uid: file.uid, url }], file: file})
          console.log(this.state.fileList);
          console.log(this.state.file);
        }.bind(this);
        // 使用 beforeUpload 回傳 false 可以停止上傳
        return false;
      }, 
      onPreview: (file) => {
        // 修复点击链接跳转不正常预览问题
        open_win(file.url);
      },
    };

    let uploadProps2 = {
      listType: "picture",
      headers: {
        "access-token": window.localStorage.getItem("authToken"),
      },
      fileList: [...fileList2],
      multiple: false,
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList2.indexOf(file);
          const newFileList = state.fileList2.slice();
          newFileList.splice(index, 1);
          console.log(newFileList)
          this.formRef.current.setFieldsValue({
            xxx2: ''
          })
          return {
            fileList2: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function () {
          let url = reader.result;
          console.log(url)
          this.setState({fileList2: [{uid: file.uid, url }], file2: file})
          console.log(this.state.fileList2);
          console.log(this.state.file2);
        }.bind(this); 
        return false;
      },
      onPreview: (file) => {
        open_win(file.url);
      },
    };
    
    // ...coding
    return (
    	...
    		<Form.Item label="xxx图片地址">
              <Upload {...uploadProps}  >
                <Button>
                  <InboxOutlined /> Select File1
                </Button>
              </Upload>
              <Form.Item name="xxx" hidden></Form.Item>
            </Form.Item>

            <Form.Item  label="xxx2图片地址">
              <Upload {...uploadProps2}>
                <Button>
                  <InboxOutlined /> Select File2
                </Button>
              </Upload>
              <Form.Item name="xxx2" hidden></Form.Item>
            </Form.Item>
    	...
    )
}

思考不周,欢迎补充!

猜你喜欢

转载自blog.csdn.net/junjiahuang/article/details/108072948
今日推荐