vue+element上传图片

版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/weixin_39895109/article/details/82801740

 做的是头像上传，因为一直出错，记录一下

 <el-upload class="img-uploader" 
action="/resNavController/uploadPic" 
:show-file-list="false" :on-success="handleUploaderSuccess"  multiple="false">
 <img v-if="accountInfo.headImg" :src="accountInfo.headImg" class="img-uploader-img">
 <i v-else class="el-icon-plus img-uploader-icon"></i></el-upload>

 action：这个属性是上传的路径地址

multiple="false"  ：这个属性设置是否上传单张和自动上传图片

show-file-list：是否上传多张图片（需知道的是，element里上传图片使用的都是单张的上传，对于多张的，也只是封装成list传递到后台中）

element里面有几个自定义的属性：执行顺序分别是

beforeAvatarUpload --->执行action提交  --->执行handleAvatarSuccess or uploadError

beforeAvatarUpload：上传图片前的判断，一般为图片格式，图片大小限定

执行提交即走后台代码

handleAvatarSuccess or uploadError：成功或者失败的执行步骤

如果不走封装的upload方法，想使用自己的方式，可使用http-request ，这种当时主要是用于跨域使用

<el-upload
                multiple="false"
                :http-request="uploadHttp"
                :on-preview="handlePicturePreview"
                :before-upload="handlePictureBefore"
                :on-remove="handlePictureRemove">
        </el-upload>

js中：

        uploadHttp: function(file) {
			var fd = new FormData();
			fd.append('file', file.file);
			$.ajax({
                url:"url路径地址",
				type: 'post',
				contentType: false,
				data: fd,
				async: false,
				processData: false,  //使用ajax上传图片要设置的
				success: function(res) {
					if (res.success) {
						console.log(res);
						//上传成功
					} else {
						//上传失败
						return;
					}

				},
                error: function(res) {
				    alert("请求错误");
				}

			});

		},