美文网首页
axios上传图片-使用vant组件

axios上传图片-使用vant组件

作者: 学琴学琴学琴 | 来源:发表于2020-12-22 00:01 被阅读0次

    第一种:用vant 中的uploader组件

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

    var params= new formData //创建form对象

    params.append('data',flie.file) //通过append向form对象添加数据

    调取接口

    this.$http.post(this.$api.地址,params,{header:{ 'Content-Type': 'multipart/form-data' }}).then(res=>{

    if(res.data.code === 0){

    this.$toast('上传成功')

    }else

    {

    this.$toast(res.msg)

    }

    }).catch(err=>{

    this.$toast(err)

    })

    这个是利用vant插件,vant已经把file进行分装,因此可以file.file可以直接获取到后台需要的blob流文件

    第二种:用input实现

     <input type="file" accept=".img/.png/.jpg" @change="uploadimg" v-modle=“file”>

    uploadimg(e){

    var f = e.target.files[0]  //blob流文件位置

    let params = new formdata()

    params.apppend('data',f)

     let config = {

            headers: { 'Content-Type': 'multipart/form-data' }

           } //请求头

    axios.post(请求地址,params,请求头).then(res=>{

    })

    }

    相关文章

      网友评论

          本文标题:axios上传图片-使用vant组件

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