1. 程式人生 > 實用技巧 >[javascript] elementui和vue下複製貼上上傳圖片

[javascript] elementui和vue下複製貼上上傳圖片

監聽事件

mounted() {

document.addEventListener('paste', this.onPasteUpload)

}

貼上的時候組裝formData , 下面程式碼中的檔案域name屬性是 imagefile ,,然後呼叫jquery的ajax方法傳過去 , 後端和普通檔案一樣就可以 , 返回檔案上傳後路徑

var formData = new FormData();

formData.append('imgfile', file);

效果可以直接點選本頁面的與我交流 , 貼上上傳一張圖片

        //貼上上傳圖片
        onPasteUpload(event
){ let items = event.clipboardData && event.clipboardData.items; let file = null if (items && items.length) { // 檢索剪下板items for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image
') !== -1) { file = items[i].getAsFile() } } } if (!file) { return; } let _this=this; var formData = new FormData(); formData.append('imgfile', file); $.ajax({ url:
'/uploadimg', type: "post", data: formData, contentType: false, processData: false, dataType: 'JSON', mimeType: "multipart/form-data", success: function (res) { }, error: function (data) { console.log(data); } }); } }, mounted() { document.addEventListener('paste', this.onPasteUpload) },