美文网首页
Vue + axios上传图片

Vue + axios上传图片

作者: Allen6879 | 来源:发表于2020-03-04 21:39 被阅读0次

1.封装请求接口

import axios from '../axios';
import Qs from 'qs'

export function Post2(url, params, data,con) {
let qs = Qs.stringify(params);
url = url + '?' + qs
return axios.post(url, data,con);
}

2.使用

        // 参数
       let pa = {
          userId:this.$store.state.userId
        }
        // fileList 图片信息
        console.log(fileList[0].file)
          // body体
         let data = new FormData() ; //创建一个form对象,必须是form对象否则后端接受不到数据
            data.append('file',fileList[0].file);  //append 向form表单添加数据
          //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };

          this.$post2("user/fileupload",pa,data,config).then(res => {
            console.log(res)
            if (res.code == "200") {
              this.Toast('提交成功');
             
            }
          });

相关文章

网友评论

      本文标题:Vue + axios上传图片

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