vue使用axios+element上传文件

淩亂°似流年 2023-09-23 18:10 73阅读 0赞

### 引言 ###

springboot后端接口类型：post，其它接口信息如下图

![image-20221117200723804][]

后端接口的实现

![image-20221117201522033][]

### 代码示例 ###

>  *  post 请求头改成’Content-Type’: ‘multipart/form-data’
>  *  用new FormData() 方式去传对象数据

1.  axios封装请求
    
        import request from '@/utils/request'
        export function uploadImage(data){
              
          return request({
              
            url: '/uploadImage',
            method: 'post',
            headers: {
              'Content-Type': 'multipart/form-data'},
            data: data
          })
        }
2.  vue界面上传文件代码
    
    >  *  http-request:覆盖默认的上传行为，可以自定义上传的实现，绑定一个function就行了
    > 
    > 我这里增加了回显功能，就是el-image这个标签
    
        <el-upload
                      action=""
                      class="upload-demo"
                      drag
                      :http-request="uploadArticleCover"
                    >
                      <el-image :src="articleCoverCallbackUrl" style="height: 180px"></el-image>
        
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
3.  绑定的方法
    
    > 一定要注意，传的对象是`new FormData()`，否则会报错的
    
        uploadArticleCover(param){
              
          console.log('进入了自定义上传')
            
          let formData = new FormData();
          formData.append('file',param.file)
          formData.append('pictureCategory','articleCover')
          uploadImage(formData).then(res =>{
              
            console.log("上传完成")
            console.log(res.data)
            this.articleCoverCallbackUrl = res.data
          })
        }
4.  结果示例
    
    ![image-20221117201444095][]
    
    ![image-20221117201315750][]

### 总结 ###

本篇文章只是当作记录，文件的上传只完成了简单的功能，如果有其它需求需要后面自己加上

[image-20221117200723804]: https://img-blog.csdnimg.cn/img_convert/08374223c84ba94d5be6e146d13cb044.png
[image-20221117201522033]: https://img-blog.csdnimg.cn/img_convert/8921625cb9fee5593407cb8234573b2e.png
[image-20221117201444095]: https://img-blog.csdnimg.cn/img_convert/5d6aff8c086154f3630c10e6f95d3319.png
[image-20221117201315750]: https://img-blog.csdnimg.cn/img_convert/b6cd671772094c5d1b5e652ea957306c.png