PhotoField组件不支持自定义的上传方法

[wisetc]

请按照以下模板填写

这是一个

• [x] 错误报告
• [x] 功能需求

SaltUI 版本

latest

浏览器、操作系统等环境信息

钉钉

请求功能

请问saltui PhotoField组件怎么使用自定义的上传方法，要把图片上传至oss支不支持？

当拦截组件自带的上传功能时，使用oss的sdk上传，图片缩略图上会显示重新上传。

[wisetc]

PhotoField组件不支持返回的结果是xml的情况。

当用的是第三方的服务，如阿里云的oss的时候，返回的数据格式很可能是xml，如下图，就会报错，而且不工作。

[wisetc]

PhotoField组件上传图片至oss，采用了两种方法都不理想。

第一种方法，采用组件附带formdata的方法，结果oss返回的上传结果只能为空或者xml，引起组件报错，无法显示正确的上传结果。

第二种方法，采用oss的sdk自定义上传至oss，能够得到预期的结果，利用正确的返回结果添加进photoList，可以显示上传成功后的图片，但是会引起photoList和列队中的图片（未通过组件上传不显示的部分）同时存在，导致显示的最大图片数最多是实际设置的最大图片数的一半

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[eternalsky]

我们这边也有使用oss 的情况，使用的方法是使用 oss 提供的 url，在 onfileuploadpreparing 切面去拿到需要的 url 和 oss key ，然后完成上传。

onfileuploadpreparing: request => {
  return new Promise((resolve, reject) => {
      fetch('后端签名认证信息URL').then(res => {
      request.setUrl(res.host);
      request.setParam('OSSAccessKeyId', res.accessKeyId);
      resolve();
      // 省略其他配置项...
   });
  })
 }
}

[wisetc]

@eternalsky 谢谢你的回复，主要是oss的没有返回内容只有返回成功状态导致组件报错，我们没有oss后端，采用前端直传，图片数据可以上传成功，但是会显示不了成功的状态，问题还是没有解决，看起来通过后端返回签名应该有会不一样的结果。

[wisetc]

@eternalsky 要利用onfileuploadcompleting钩子去改造一下response.rawResponse.rawResponse，但是不知道值应该怎么设置

[eternalsky]

@wisetc response 可以 set，这些钩子里的方法，可以在 uploadcore 的文档里查询，文档很多，所以是以链接的形式呈现的。

[wisetc]

之所以在 onfileuploadpreparing 切面去拿到需要的 url 和 oss key，而不采用组件属性params赋值key的原因是一旦PhotoField组件被初始化，即便改变绑定的key的值，实际上传是用的key还是原来的值，这样一来上传多张图片到oss的时候名称始终是一样的。

实际的代码中对返回的结果进行了模拟改造，调用response的setResponse方法，如下

  onfileuploadcompleting(response) {
    return new Promise(resolve => {
      response.setResponse({
        content: {
          data: {
            url: urljoin(host, this.state.imageName)
          }
        }
      });
      resolve();
    });
  }

结合 onfileuploadpreparing ，改变上传过去的key参。

  onfileuploadpreparing(request) {
    return new Promise((resolve, reject) => {
      const imageName = getKey();
      this.setState(
        {
          imageName
        },
        () => {
          request.setParam('key', imageName);
          resolve();
        }
      );
    });
  }

然后再onChange中显示结果

  onChange(fieldData, photoList) {
    this.setState({
      photoList
    });
  }

方法有点绕，却结果证明有效，图片上传成功并且正确显示，且不会影响上传队列中的数量，问题解决了。

[eternalsky]

恩，oss 的上传方式和我们要求的格式是有些区别的，不过通过这两个切面可以解决这个问题，如果没有问题的话，可以 close 这个 issue 了。