做的是头像上传,因为一直出错,记录一下
<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("请求错误");
}
});
},