一壤巷、文件上傳
步驟:將文件通過(guò)接口轉(zhuǎn)換為地址給后臺(tái)
怎么將文件給后臺(tái)?
// uploadFile el文件上傳組件自定義的方法(http-request)
async uploadFile(files) {
// files文件
const { file } = files
const { name, uid } = file
let form = new FormData()
form.append('WenJianID', uid)
form.append('files', file)
//將文件傳給后臺(tái) form包含文件的入?yún)? const res = await WenJianCC(form)
}
FormData 對(duì)象的使用:
1----用一些鍵值對(duì)來(lái)模擬一系列表單控件:即把form中所有表單元素的
name與value組裝成一個(gè)queryString刑顺。2----異步上傳二進(jìn)制文件楔敌。
二尊惰、原生draggen使用
需求是拽元素并放置在input框里碳却。
思路,獲取拖拽元素的數(shù)據(jù)翅娶,拼接到輸入框光標(biāo)后面
// 拖拽元素
// 將元素設(shè)置為可拖拽元素
:draggable="true"
// 拖拽完成觸發(fā)事件
@dragend="draggableEnd()"
// 放置位置元素
// 放置位置設(shè)置 一定要阻止默認(rèn)事件
@dragover.prevent.native="() => {}"
// 放置觸發(fā)事件
@drop.prevent.native="downDrop()"
// input光標(biāo)獲取
@blur="blurEvent"
blurEvent(e) {
this.blurIndex = e.srcElement.selectionStart
},