文件上傳及原生draggen

一、文件上傳

步驟:將文件通過接口轉換為地址給后臺
怎么將文件給后臺?

// 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)
   //將文件傳給后臺  form包含文件的入參
    const res = await WenJianCC(form)
}

FormData 對象的使用:
1----用一些鍵值對來模擬一系列表單控件:即把form中所有表單元素的
name與value組裝成一個queryString。2----異步上傳二進制文件。

二、原生draggen使用

需求是拽元素并放置在input框里。
思路,獲取拖拽元素的數據,拼接到輸入框光標后面

// 拖拽元素
// 將元素設置為可拖拽元素
:draggable="true"
// 拖拽完成觸發事件
@dragend="draggableEnd()"
// 放置位置元素
// 放置位置設置  一定要阻止默認事件
@dragover.prevent.native="() => {}"
// 放置觸發事件
@drop.prevent.native="downDrop()"
// input光標獲取
@blur="blurEvent"
blurEvent(e) {
  this.blurIndex = e.srcElement.selectionStart
},
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容