美文网首页
文件上传及原生draggen

文件上传及原生draggen

作者: 二荣xxx | 来源:发表于2023-02-05 19:13 被阅读0次

一、文件上传

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

// 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
},

相关文章

网友评论

      本文标题:文件上传及原生draggen

      本文链接:https://www.haomeiwen.com/subject/kclzhdtx.html