文件上传及原生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
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容