Vue + axios上传图片

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上传图片)