Vue上传图片功能【element ui】

最新推荐文章于 2024-07-25 09:37:37 发布

self-abasedAshuai

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量1.7k

点赞数 1

文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/qq_63524016/article/details/128766461

版权

用的是Element中的Upload组件实现功能

在这里插入图片描述

<!-- action表示图片要上传到的后台api接口 地址一定要是后台的根地址加上请求地址-->
            <!-- on-preview事件的作用是点击预览图片-->
            <!-- on-remove事件的作用是删除图片 -->
            <!-- list-type指定当前预览组件的呈现方式 -->
            <el-upload class="upload-demo" action="http://127.0.0.1:8888/api/private/v1/upload"
              :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>

<script>
	data(){
		return {
		}
	},
	methods:{
		// 处理图片预览效果
	     handlePreview(){
	        
	    },
	    // 处理移除图片的操作
	    handleRemove(){
	      
	    },
	}
</script>

路径那里是axios请求根路径和接口文档里面后端给的路径拼接的
在这里插入图片描述

检测能否上传成功

只要看到这个就证明这张图片并没有上传成功
在这里插入图片描述

我已经通过axios的request拦截器为每一个请求都挂载了一个Authorization也就是token，挂载了这个也就说明每一个axios请求都会追加一个token
在这里插入图片描述

但是为什么配置了token还是显示无效的token呢？
是因为在调用upload组件上传图片在发ajax的时候没有用到axios，这个组件内部自己封装了ajax，我们需要通过headers属性手动为他绑定一个请求头。

<script>
	data(){
		return {
			 // 头片上传组建的headers请求头对象
      headerObj:{
        Authorization:window.sessionStorage.getItem('token')
      },
		}
	},
	methods:{
		// 处理图片预览效果
	     handlePreview(){
	        
	    },
	    // 处理移除图片的操作
	    handleRemove(){
	      
	    },
	}
</script>