参数为FormData 类型转换

最新推荐文章于 2022-12-02 09:19:52 发布

有趣的前端

最新推荐文章于 2022-12-02 09:19:52 发布

阅读量2k

点赞数 1

分类专栏： vue 文章标签：接口

本文链接：https://blog.csdn.net/wys997/article/details/108268810

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、准备，了解所需技术知识

上传文件表单：

   <input type="file" accept="image/*" capture="camera" >
   介绍:
1. type="file" 上传文件表单
2. accept="image/*" 上传文件类型
3. capture="camera" 使用手机摄像头拍摄

请求参数为FormData 类型

   new FormData()
   
   let formData = new FormData()          formData.append('file', e.target.files[0])

FormData作用:

上传文件（二进制格式上传）
提交form表单

了解一下接口

4. 上传照片： https://www.365msmk.com/api/app/public/img
"Post"请求
2.获取上传照片的网址路径
https://www.365msmk.com/api/app/user
"put"请求
5. https://www.365msmk.com/api/app/userInfo
"GET"请求

axios的put请求的使用：

axios.put(url,{}).then(res => {})

请求拦截

axios.interceptors.request.use(function (config) {
    //在发送之前做些什么
   
        config.headers['authorization'] = `Bearer  token`
    

    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

流程:

上传图片
设置头像
更新头像

html部分:

 <img :src="img" alt="" style="width: 80px;">
        <br>
        <label> 手机拍摄
            <input type="file" accept="image/*" capture="camera" @change="paishe($event)">
        </label>
        <br><br>
        <label>相册上传
            <input type="file" accept="image/*" @change="paishe($event)">
        </label>

逻辑部分:

 paishe(e) {
                console.log(e)
                let formData = new FormData();
                formData.append('file', e.target.files[0])
                //调用上传图片接口上传照片
                this.$http.post('https://www.365msmk.com/api/app/public/img', formData).then(res => {
                    console.log(res)
                    if (res.data.code === 200) {
                        //设置头像接口
                        this.$http.put('https://www.365msmk.com/api/app/user', {
                            avatar: res.data.data.path
                        }).then(ress => {
                            console.log('图像路径',ress)

                            this.img = res.data.data.avatar
                        })
                    }
                })
            }