FormData实现文件上传

我用到FormData传输的使用场景:vant UI组件里面 的图片上传这块,需要调用后台的图片上传接口,使用的是FormData方式上传的

https://www.cnblogs.com/hutuzhu/p/4409292.html 这个链接里面写的很全

FormData顾名思义就是表单数据的意思。当我们需要将整个表单用这种方法上传,只需要将整个form元素appdent进去 例如:

假设我已经有一个form表单。

let form = document.getElementById('#formData');
let formData = new FormData();
formData.append(form)
调取接口的时候将整个formData作为参数 即可

首先new FormData() 方法,FormData里面的方法就只有一个append方法。意思就是将你需要上传的文件 appdent 进去

在使用vantUI的图片上传组件(Uploader)有一个after-read 的Props 我们可以拿到 file

<van-uploader :after-read="afterRead" />

afterRead(file){
    let formData = new FormData()
    formData.append(file)
    /*
     下面请求接口,将formData作为参数传过去即可
   */  
  
}

 

posted @ 2019-08-16 14:45  敲代码的树先生  阅读(863)  评论(0编辑  收藏  举报