使用transformFile添加水印不成功，经测试发现没有调用该方法

[veking]

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

Version

1.6.4

Environment

macOS Catalina 版本10.15.4，Chrom 版本 83.0.4103.116（正式版本）（64 位），Vue 版本1.6.4

Reproduction link

https://antdv.com/components/upload-cn/#components-upload-demo-transform-file-before-request

Steps to reproduce

使用官方API提供的代码可重现问题，代码链接：https://antdv.com/components/upload-cn/#components-upload-demo-transform-file-before-request
1、选择文件上传
2、查看文件是否打上水印

What is expected?

上传文件打上水印

What is actually happening?

上传文件未包含水印

[labike]

需要手动调用一下
在beforeUpload的时候调用transformFile生成水印, 开发者工具会去除生成的水印, 上传成功后查看图片是否生成水印

具体实现:

beforeUpload (file) {
      this.transformFile(file).then(res => {
          console.log('res', res) // res返回bolb:{type: ''img/png', size: 10000} 
          // 判断res.type之后执行上传
          const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
          if (!isJpgOrPng) {
              this.$message.error('上传图片格式错误!')
          }
          const isLt4M = file.size / 1024 / 1024 / 1024 / 1024 < 4
          if (!isLt4M) {
              this.$message.error('图片大小不超过 4MB!')
          }
          return isJpgOrPng && isLt4M
      }
}

[veking]

感谢，我试下。

[Wangrong23]

需要手动调用一下
在beforeUpload的时候调用transformFile生成水印, 开发者工具会去除生成的水印, 上传成功后查看图片是否生成水印

具体实现:

beforeUpload (file) {
      this.transformFile(file).then(res => {
          console.log('res', res) // res返回bolb:{type: ''img/png', size: 10000} 
          // 判断res.type之后执行上传
          const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
          if (!isJpgOrPng) {
              this.$message.error('上传图片格式错误!')
          }
          const isLt4M = file.size / 1024 / 1024 / 1024 / 1024 < 4
          if (!isLt4M) {
              this.$message.error('图片大小不超过 4MB!')
          }
          return isJpgOrPng && isLt4M
      }
}

这样的写法return false无法阻止上传

[labike]

@Wangrong23 无法阻止上传的原因是transformFile中canvav.toBlob(callback, type),不指明type类型的时候永远是image/png, 这里判断的时候也是只判断了png和jpg所以无法阻止上传

[labike]

那问题就可能出在transformFile返回的promise上

[Wangrong23]

那问题就可能出在transformFile返回的promise上

是的，transformFile是按照文档的示例写的，需要做什么修改吗？

[Wangrong23]

这样可以

            beforeUpload(file) {
                return new Promise((resolve, reject) => {
                    this.transformFile(file).then(res => {
                        if (this.qiniu.token) {
                            this.album[this.album.length] = Object.assign(res, file)
                            this.uploadQiniuApi(res, 'album', 'image')
                            reject()
                        } else {
                            resolve(res)
                        }
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            transformFile(file) {
                return new Promise(resolve => {
                    if (!this.joinSettings.watermark) {
                        resolve(file)
                    }
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => {
                        const canvas = document.createElement('canvas');
                        const img = document.createElement('img');
                        img.src = reader.result;
                        img.onload = () => {
                            const ctx = canvas.getContext('2d');
                            let width = img.width;
                            let height = img.height;
                            canvas.width = width;
                            canvas.height = height;
                            ctx.drawImage(img, 0, 0, width, height);
                            ctx.fillStyle = 'red';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(this.joinSettings.watermark, 20, 20);
                            let dataUrl = canvas.toDataURL("image/jpeg", 1)
                            resolve(this.dataURLtoFile(dataUrl, file.name))
                        };
                    };
                });
            },
            // 将裁剪base64的图片转换为file文件
            dataURLtoFile(dataurl, filename) {
                let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, {type: mime});
            },

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[jiangyh1024]

@Wangrong23

这样写了 会报错 不知道为什么

[Wangrong23]

@Wangrong23

这样写了 会报错 不知道为什么

看着像是你是多选上传，我没考虑这种情况，这种情况下beforeUpload中的file参数好像是数组

[jiangyh1024]

是多选
但是他是 一次一次的调 beforeUpload， file 不是数组

多选模式下 选一个文件上传也有这个问题 。。。

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.