JavaScript replace a file input with a Blob

在操作介面上，上傳圖片是很常見的操作，可是當今天遇上了要裁切圖片之後在上傳，可能就會碰到：該如何將裁切完的圖片塞回原本的 input 內這種問題。

範例

或許你可以用 FormData 把送出的內容抽換掉，不過那個都是發送表單在做的事情了，這種情形我是直接使用 DataTransfer 來處理這段。

範例為 vue 的寫法

const cropper = this.$refs["vue-cropper"];
cropper.getCropBlob(data => {
  const file = new File([data], `${Date.now()}.png`, { type: data.type });
  const container = new DataTransfer();
  container.items.add(file);
  this.$refs[`input-file-${this.name}`].files = container.files;
});

要注意的是支援度的問題，是只有電腦可以使用，手機是不支援的。