1.自定义上传时,当选中图片this.$refs.upload.submit() 就会触发:http-request = "httpRequest"事件 。
<el-form-item :label="upload_lable" :label-width="formLabelWidth">
<el-upload class="upload-demo" ref="upload" :limit="upload_limit" :auto-upload="false" :http-request="httpRequest" action="" :on-change="filechange" :on-remove="handleRemove" :file-list="form.fileList" list-type="picture">
<el-button size="small" type="primary">点击选择</el-button>
<div slot="tip" class="el-upload__tip">只能上传1张jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="commitSave">确 定</el-button>
</div>
filechange(file, fileList) { // 如果没有选取文件,可以加个字段来控制流程
if (file.name) {
this.upload_flag = true;
}
},
//触发 httpRequest 事件
commitSave(){ // 点确定时触发事件
if(this.upload_flag){
this.$refs.upload.submit();
}else{ // 不传图片,直接调用
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true;
if(this.dialogTitle == "新增风格"){
this.form.id = '';
}else{}
var fd = new FormData();// FormData 对象
fd.append("image_file", '');// 文件对象
// 其他参数
fd.append("id", this.form.id);
fd.append("sort", this.form.sort);
fd.append("name", this.form.name);
updateStyle(fd).then(rsp => {
this.$message({
type: 'success',
message: '操作成功'
})
this.getInitData();
this.clearForm();
this.loading = false;
this.dialogFormVisible = false;
}).catch(error => {
this.loading = false;
})
} else {
console.log('error httpRequest submit!!');
return false;
}
});
}
},
httpRequest(param) { // param是自带参数。 this.$refs.upload.submit() 会自动调用httpRequest方法.在里面取得file
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true;
if(this.dialogTitle == "新增风格"){
this.form.id = '';
}else{}
var fileObj = param.file; // 相当于input里取得的files
var fd = new FormData();// FormData 对象
fd.append("image_file", fileObj);// 文件对象
// 其他参数
fd.append("id", this.form.id);
fd.append("sort", this.form.sort);
fd.append("name", this.form.name);
updateStyle(fd).then(rsp => { // 直接提交给后台。
this.$message({
type: 'success',
message: '操作成功'
})
this.getInitData();
this.clearForm();
this.loading = false;
this.dialogFormVisible = false;
}).catch(error => {
this.loading = false;
})
} else {
console.log('error httpRequest submit!!');
return false;
}
});
},
下面是项目实例:(单张上传,大家只要参考上传图片的部分,有些不相关的字段请自行增减)
<!--新增编辑--> <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" v-loading="loading"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item :label="upload_lable" :label-width="formLabelWidth"> <el-upload class="upload-demo" ref="upload" :limit="upload_limit" :auto-upload="false" action="" :show-file-list="true" :on-change="filechange" :on-remove="handleRemove" :file-list="form.fileList" list-type="picture"> <el-button size="small" type="primary">点击选择</el-button> <div slot="tip" class="el-upload__tip">只能上传一张图片,且小于1M</div> </el-upload> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="commitSave('form')">确 定</el-button> </div> </el-dialog>
js:
data(){ return{
form: { "id": undefined, "name": "", "image": "", // 取数据时返回的图片url,上传时不用提交 // "sort": 0, // 20190104 去掉排序 sfk "image_file": "",//图片上传提交 fileList: [] // 初始上传的文件 }, upload_limit: 2, // 最大上传数定为2且配合filechange方法就可以实现符合操作习惯的单张上传了,如果限制为1张,那在切换选择时就要删除原先的图片才能再选择新图片。 upload_lable:"", //上传lable } }
methods:{
// 删图片时触发,raw handleRemove(file, fileList) { this.form.image = ""; this.form.image_file = ""; this.form.fileList = []; },
filechange(file, fileList) { // if(file.size > 1024 * 1024){ this.$message({ type: 'warning', message: '图片不能大于1M' }) if(fileList.length >= 2){ this.form.fileList = fileList.slice(0,1); }else{ this.form.fileList = []; } }else{ if(fileList.length >= 2){ this.form.fileList = fileList.slice(1); }else{ this.form.fileList = fileList; } } }, //触发 httpRequest 事件 commitSave(form){ this.$refs[form].validate((valid) => { if (valid) { if(this.dialogTitle == "新增风格"){ this.form.id = ''; }else{} var fd = new FormData();// FormData 对象 var imagefile; if(this.form.fileList.length > 0){ imagefile = this.form.fileList[0].raw; fd.append("image_file", imagefile);// 文件对象 }else{ imagefile = ""; } fd.append("id", this.form.id); // fd.append("sort", this.form.sort); fd.append("name", this.form.name); this.loading = true; updateStyle(fd).then(rsp => { this.$message({ type: 'success', message: '操作成功' }) this.getInitData(); this.clearForm(); this.loading = false; this.dialogFormVisible = false; }).catch(error => { this.loading = false; }) } else { return false; } }); }, // 修改风格 handleEdit(row){ this.dialogFormVisible = true; this.dialogTitle = "修改风格"; this.form.id = row.id; this.form.name = row.name; this.form.image = row.image; // this.form.sort = row.sort; var obj = {} obj.url = row.image; obj.name = ""; this.form.fileList = []; if(obj.url != undefined && obj.url != "" && obj.url != null){ this.form.fileList.push(obj); } this.upload_lable = "重新上传图片" }
}
Brief summary:
1.图片预览是根据this.form.fileList变量来控制的。