axios 在vue项目中提交文件

最新推荐文章于 2024-04-02 04:04:01 发布

werch

最新推荐文章于 2024-04-02 04:04:01 发布

阅读量111

点赞数

分类专栏： vue axios input 上传file

本文链接：https://blog.csdn.net/weixin_42666092/article/details/118082742

版权

vue 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

axios

2 篇文章 0 订阅

订阅专栏

input 上传file

1 篇文章 0 订阅

订阅专栏

   <span>图片</span><input type="file" name="" id="tp" />
    <button @click="sctp">上传图片</button>

script
//https://www.jianshu.com/p/698fd2087863?_wv=1031参照这个电商接口
//的上传图片接口 http://172.17.8.100/small/user/verify/v1/modifyHeadPic
import axios from 'axios';
export default {
methods:{
sctp() {
      //获取要上传文件的值
      let x = document.getElementById('tp').files[0];
      const forms = new FormData();
      forms.append('image', x);
      console.log(localStorage.getItem('userId'));
      console.log(localStorage.getItem('sessionId'));
      axios({
        method: 'post',
        url: 'small/user/verify/v1/modifyHeadPic',
        headers: {
          userId: localStorage.getItem('userId'),
          sessionId: localStorage.getItem('sessionId'),
        },
        data: forms,
      }).then((res) => {
        console.log(res.data);
      });
}