New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

上传文件组件无法显示文件名 // Upload Component couldn't display file name #10319

Closed
JixunMoe opened this Issue May 1, 2018 · 3 comments

Comments

Projects
None yet
4 participants
@JixunMoe

JixunMoe commented May 1, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.4

Environment

Chrome 66.0.3359.117 (Fedora x64), Firefox 59.0.2 (Fedora x64), Chrome 66.0.3359.139 (Win 10 x64)

Reproduction link

http://ant.design/components/upload

Steps to reproduce

  1. 左侧,第二个例子。
  2. 选择一个文件上传。

.

  1. Left section, second example from top.
  2. Select any file.

What is expected?

能显示文件名。

File name shown as expected.

What is actually happening?

无法显示文件名(文件属性未能正确拷贝,在 /antd/es/upload/utilsfileToObject 函数)。

Blank file name (file properties was not copied in /antd/es/upload/utils, method fileToObject).


onChange 回调设定断点进行调试,可以发现以下特性:

const { file } = info;

> JSON.stringify(file)
< "{"uid":"rc-upload-1525188854561-2","percent":0,"originFileObj":{"uid":"rc-upload-1525188854561-2"},"status":"uploading"}"

> Object.keys(file.originFileObj)
< ["uid"]

> Object.keys(file.originFileObj.__proto__)
< (4) ["name", "lastModified", "lastModifiedDate", "webkitRelativePath"]

临时解决方案(Monkey-patch workaround)

在引导文件加入或引用下述代码 // Add or reference the following code in app entry:

const uploadUtils = require('antd/es/upload/utils');
uploadUtils.fileToObject = function (file) {
  const fileDuplicated = {};
  if (file && file.__proto__) {
    Object.keys(file.__proto__).forEach(key => {
      fileDuplicated[key] = file[key];
    });
  }
  return {
    // file: uid
    ...file,
    // fileDuplicated: other `File` props.
    ...fileDuplicated,

    percent: 0,
    originFileObj: file,
  };
};

题外话:前两天还是正常的,今天突然显示不了了,应该是浏览器更新了。

@ant-design-bot

This comment has been minimized.

ant-design-bot commented May 1, 2018

Translation of this issue:


upload file can't display file name // Upload Component couldn't display file name

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.4

Environment

Chrome 66.0.3359.117, Firefox 59.0.2

Reproduction link

[http://ant.design/components/upload] (http://ant.design/components/upload)

Steps to reproduce

  1. Left, second example.

  2. Select a file to upload.

  3. Left section, second example from top.

  4. Select any file.

What is expected?

Can display the file name.

File name shown as expected.

What is actually happening?

Unable to display file name (file attribute was not copied correctly in fileToObject function of /antd/es/upload/utils).

Blank file name (file properties was not copied in /antd/es/upload/utils, method fileToObject).


To debug at the onChange callback setting breakpoint, you can find the following features:

Const { file } = info;

> JSON.stringify(file)
< "{"uid":"rc-upload-1525188854561-2","percent":0,"originFileObj":{"uid":"rc-upload-1525188854561-2"},"status":"uploading" }"

> Object.keys(file.originFileObj)
< ["uid"]

> Object.keys(file.originFileObj.__proto__)
< (4) ["name", "lastModified", "lastModifiedDate", "webkitRelativePath"]

Monkey-patch workaround

Add or reference the following code in the boot file // Add or reference the following code in app entry:

Const uploadUtils = require('antd/es/upload/utils');
uploadUtils.fileToObject = function (file) {
  Const fileDuplicated = {};
  If (file && file.__proto__) {
    Object.keys(file.__proto__).forEach(key => {
      fileDuplicated[key] = file[key];
    });
  }
  Return {
    // file: uid
    ...file,
    // fileDuplicated: other `File` props.
    ...fileDuplicated,

    Percent: 0,
    originFileObj: file,
  };
};

Digression: The first two days are still normal, and suddenly it cannot be displayed today. It should be a browser update.

@JixunMoe JixunMoe changed the title from 上传文件组建无法显示文件名 // Upload Component couldn't display file name to 上传文件组件无法显示文件名 // Upload Component couldn't display file name May 1, 2018

@JixunMoe

This comment has been minimized.

JixunMoe commented May 1, 2018

感觉把 issue 放到 react-component/upload 会比较好一些…

@yociduo

This comment has been minimized.

Contributor

yociduo commented May 2, 2018

image
应该是这个change引起的,可不可以回退回去?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment