Vue 使用 ElementUI 上传图片并转换为 PNG 格式

要将上传的图片格式转为 PNG，你可以使用'canvas'来实现。以下是一个示例代码：

// 假设上传图片的数据为blob格式，可以通过input[type="file"]获取
const file = document.querySelector('input[type="file"]').files[0];

// 创建一个图片对象
const img = new Image();

// 监听图片加载完成事件
img.onload = function() {
  // 创建一个canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置canvas的宽高与图片一致
  canvas.width = img.width;
  canvas.height = img.height;

  // 将图片绘制到canvas上
  ctx.drawImage(img, 0, 0);

  // 将canvas转为PNG格式的图片数据
  const pngData = canvas.toDataURL('image/png');

  // 将转换后的图片数据上传到服务器等操作
  // ...

};

// 将blob格式的图片数据转为base64格式
const reader = new FileReader();
reader.onloadend = function() {
  // 将base64格式的图片数据赋值给图片对象
  img.src = reader.result;
};
reader.readAsDataURL(file);

在上面的代码中，我们首先获取上传的图片数据（假设为blob格式），然后创建一个'Image'对象，并将图片数据转为base64格式赋值给图片对象的'src'属性。接着监听图片的'onload'事件，当图片加载完成后，创建一个'canvas'元素，并将图片绘制到canvas上。最后，使用'toDataURL'方法将canvas转为PNG格式的图片数据。

你可以根据实际的需求将转换后的图片数据上传到服务器或进行其他操作。