<el-upload
class="upload-demo"
:action="uploadUrl"
:data="upLoadObj"
name="file_upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img
v-if="imageUrl"
:src="imageUrl"
class="avatar"
style="width:360px;height:184px;"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//参数
imageUrl: '',
uploadUrl: this.$url + '/brand/upload/uploadFile',
upLoadObj: {
album_id: '0',
file_type: '0',
type: '1,2,3,4'
},
handleAvatarSuccess(res, file) {
console.log(res, URL.createObjectURL(file.raw), 'handleAvatarSuccess');
this.imageUrl = URL.createObjectURL(file.raw);
},
<style scoped>
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
text-align: center;
line-height: 178px;
}
</style>
// 自定义上传图片
upLoad(param) {
let thiz = this;
console.log(param, '自定义上传图片');
let formData = new FormData();
formData.append('album_id', '21'); // 额外参数
formData.append('file_type', '0'); // 额外参数
formData.append('type', '1,2,3,4'); // 额外参数
formData.append('file_upload', param.file);
let loading = thiz.$loading({
lock: true,
text: '上传中，请稍候...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
thiz.$axios.post('/brand/upload/uploadFile', formData).then(({ data }) => {
console.log(data, 'res自定义上传图片');
// imageUrl
if (data.code == '1') {
this.$message({
message: data.message,
type: 'success'
});
this.imageUrl = 'https://upload.ishare-go.com/' + data.origin_file_name
console.log(this.imageUrl,'this.imageUrl')
}
// if (data.statusCode === 233) {
// thiz.$message('上传文件成功，' + data.message);
// thiz.formFileList = [];
// thiz.uploadFormFileList = [];
// } else {
// thiz.formFileList = [];
// thiz.uploadFormFileList = [];
// thiz.$message('上传文件失败，' + data.message);
// }
loading.close();
});
},
handleChange(file, fileList) {
// this.fileList = fileList;
console.log(file, fileList, 'file,fileList');
},
handleAvatarSuccess(res, file) {
console.log(res, URL.createObjectURL(file.raw), 'handleAvatarSuccess');
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!');
// }
// if (!isLt2M) {
// this.$message.error('上传头像图片大小不能超过 2MB!');
// }
return isJPG && isLt2M;
}
<style scoped>
.fs {
font-size: 12px;
}
.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}
.bgc {
background-color: red;
color: #fff;
}
.el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
====> 也可以用这个
// 自定义上传图片
upLoad(param) {
let thiz = this;
console.log(param, '自定义上传图片');
let formData = new window.FormData();
formData.append('album_id', '21'); // 额外参数
formData.append('file_type', '0'); // 额外参数
formData.append('type', '1,2,3,4'); // 额外参数
formData.append('file_upload', param.file);
let loading = thiz.$loading({
lock: true,
text: '上传中，请稍候...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
let instance = axios.create({
baseURL: 'http://msmtest.ishare-go.com', //请求基地址
// timeout: 3000,//请求超时时长
// url: '/url',//请求路径
// method: 'get,post,put,patch,delete',//请求方法
headers: {
'Content-Type': 'multipart/form-data'
} //请求头
// params: {},//请求参数拼接在url上面
// data: {},//请求参数放请求体里
});
instance.post('/brand/upload/uploadFile', formData, config).then(({ data }) => {
console.log(data, 'res自定义上传图片');
// imageUrl
if (data.code == '1') {
this.$message({
message: data.message,
type: 'success'
});
this.imageUrl = 'https://upload.ishare-go.com/' + data.origin_file_name;
console.log(this.imageUrl, 'this.imageUrl');
}
// if (data.statusCode === 233) {
// thiz.$message('上传文件成功，' + data.message);
// thiz.formFileList = [];
// thiz.uploadFormFileList = [];
// } else {
// thiz.formFileList = [];
// thiz.uploadFormFileList = [];
// thiz.$message('上传文件失败，' + data.message);
// }
loading.close();
});
},
