文件上传及原生draggen

2023-02-05  本文已影响0人  二荣xxx

一、文件上传

步骤:将文件通过接口转换为地址给后台
怎么将文件给后台?

// 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
},
上一篇 下一篇

猜你喜欢

热点阅读