使用element-ui的upload组件上传文件遇到的坑

最近工作中用到了element-ui的upload组件上传文件,再此记录一下遇到的坑。
首先记录一下上传文件的实现过程:
	看element官网的上传组件upload,我使用的是手动上传
	具体代码如下:
	
	`                
                        选取文件
                        上传到服务器
                        
只能上传jpg/png文件,且不超过500kb
`
		 data() {
		            return {
		                SetHeaders: {Authorization:token},
		                fileList: [],
		                }
``
        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },

            SetUrl:function(){
               //在此处动态组织你的url
                return  Url;
            },`

很简单的代码,基本上就是把官网的示例代码拿过来直接用。
下面记录一下困扰我两天的问题:
	我们使用postman测试后台接口上传文件的时候有一个KEY值,这个KEY值在前端如果不设置upload组件的时候name属性的时候会默认设置为file,所以导致文件上传一直不成功,解决办法修改upload的那么name属性为后台规定的key值就可以了。(我拿到的后台给的postman测试脚本的时候此处的KEY值和上传的文件名称相同,导致我误以为此处的KEY值是文件的名字,所以才出现了这个错误)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190918102827898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxMTM4MzY=,size_16,color_FFFFFF,t_70)

你可能感兴趣的:(使用element-ui的upload组件上传文件遇到的坑)