一、使用el-upload进行文件上传
1. 前提
已安装elementUI并正确引入
2. 参数说明
| 参数 | 说明 |
|---|---|
| :action | 是执行上传动作的后台接口，本文置空采用http-request取而代之拦截请求，进行文件上传 |
| :multiple="true" | 设置是否可以同时选中多个文件上传，这个也是<input type='file'>的属性 |
| :limit="1" | 上传文件数量，设置最多可以上传的文件数量，超出此数量后选择的文件是不会被上传的。 |
| :on-exceed | 绑定的方法则是处理文件超出限制数量后的动作 |
| :file-list="fileList" | 用于显示已上传文件列表，其中fileList是数组对象，初始为空。 |
| 参数 | 说明 |
|---|---|
| accept="image/jpeg,image/gif,image/png" | 限制上传文件的格式 |
具体可参考HTML5 input file类型，accept（文件类型控制）
- 这个是直接使用
<input type='file'>一样的属性了，accept属性的值可以是accept="image/gif, image/jpeg, text/plain, application/pdf"等等.添加了
accept属性仅仅是选择文件时限制格式，其实用户还是可以点选“所有文件”选项，上传其他格式。- 如果需要在
上传时校验文件格式，则需要在:before-upload或on-change这个钩子绑定相应的方法来校验，具体校验方法查看3. 页面中使用中的beforeUpload和handleChange方法
| 参数 | 说明 |
|---|---|
| abort | 取消上传请求 |
this.$refs.upload.abort( file);/ /这里的file为fileList 中的 file 对象
| 参数 | 说明 |
|---|---|
| slot="tip | 用于添加提示如正确的文件格式应该为***，如 |
<div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
| 参数 | 说明 |
|---|---|
| abort | 取消上传请求 |
this.$refs.upload.abort( file);/ /这里的file为fileList 中的 file 对象
其他参数具体参考
elementUI官方API文档>upload
3. 页面中使用
- template
<template>
<el-upload
:class="{disabled:preview||fileIds.length===1}"
ref="upload"
action
list-type="picture-card"
:file-list="fileList"
:disabled="preview"
accept="image/jpeg,image/gif,image/png"
:multiple="true"
:limit="1"
:auto-upload="true"
:on-preview="handlePictureCardPreview"
:before-remove="beforeRemove"
:http-request="getUploadFile"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-change="handleChange"
:on-progress="onProgress"
:on-error="handleError"
:on-exceed="handleExceed"
>
<!-- 触发上传的按钮 -->
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
</el-upload>
</template>
- script
<script>
export default {
data() {
return {
/* 文件上传区 */
fileList: [], // 文件列表
isValidUpload: true, // 图片是否符合要求
delFileUid: '', // 待删除的图片uid
dialogImageUrl: '', // 预览的图片地址
dialogVisible: false, // 是否显示-预览图片
fileObj: {}, // 待上传文件
fileIds: [], // 存放文件uid与后台传过来的id
imgId: [] // 需要上传的后端返回的文件ID
}；
}，
methods:{
// --------------------el-upload上传文件-开始--------------------
// 图片预览-on-preview-事件
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 文件上传
// autoUpload
// 文件上传-on-exceed-事件-文件超出个数限制时的钩子
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 5 个文件,请重新选择`);
},
// 文件上传-on-change-事件-文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
handleChange(file, fileList) {
// console.log('handleChange>', 'file', file, 'fileList', fileList);
// console.log('file.type', file.raw.type);
const isPNG = file.raw.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
let errMsg = '';
if (!isPNG) {
errMsg = '上传图片只能是 JPG 格式!';
// this.$message.error('上传图片只能是 JPG 格式!');
fileList = fileList.pop();
} else if (!isLt2M) {
errMsg = '上传图片大小不能超过 2MB!';
// this.$message.error('上传图片大小不能超过 2MB!');
fileList = fileList.pop();
}
this.isValidUpload = isPNG && isLt2M;
if (!this.isValidUpload) {
this.$confirm(`${errMsg}`, '系統提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showCancelButton: false,
customClass: 'confirm-success',
type: 'error'
})
.then(() => {
//
})
.catch(() => {
//
});
}
return this.isValidUpload;
},
// 文件上传-before-upload-事件-文件上传前
beforeUpload(file) {
// console.log('beforeUpload>', 'file', file);
this.fileObj = new FormData();
this.fileObj.append('file', file, file.name);
console.log('beforeUpload>', 'file', file, 'fileObj', this.fileObj);
if (file.type.split('/')[0] === 'image') {
let _this = this;
let reader = new FileReader();
// let fileNew = event.target.files[0];// 写在beforupload时注释掉此行,在handleChange中时取消此行的注释
reader.readAsDataURL(file);
reader.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
if (!_this.creativeSize(this.width, this.height)) {
_this.$message.info(
`${file.name}尺寸为${this.width}*${this.height}，图片最佳比例为 560 * 670 ！`
);
file.width = this.width;
file.height = this.height;
console.log(file.width, file.height);
} else {
file.width = this.width;
file.height = this.height;
console.log(file.width, file.height);
}
};
};
};
},
// 方法-计算图片比例是否符合要求
creativeSize(width, height) {
let minWidth = 560;
let minHeight = 670;
let isCreativeSize = true;
if (width * minHeight > height * minWidth) {
isCreativeSize =
width - Math.ceil((height * minWidth) / minHeight) < 2;
} else {
isCreativeSize =
height - Math.ceil((width * minHeight) / minWidth) < 2;
}
if (width < minWidth || height < minHeight) {
// this.$message.error(`像素不够`);
return false;
} else if (isCreativeSize) {
return true;
} else {
return false;
}
},
// 文件上传-http-request-事件-拦截请求
getUploadFile(fileObj) {
// console.log('getUploadFile>', 'fileObj', fileObj);
// 上传图片
if (this.isValidUpload) {
// 请求接口-上传图片
this.uploadFile(this.fileObj).then(res => {
// console.log('uploadFile', res);
if (res.code === 1) {
this.fileIds.push({
uid: fileObj.file.uid,
imgId: res.data
});
}
// console.log('uploadFile>','fileIds', this.fileIds);
});
}
},
// 文件上传-on-progress-事件
onProgress(event, file, fileList) {
// console.log('onProgress', response, file, fileList);
},
// 文件上传-before-remove-事件-移除文件前
beforeRemove(file, fileList) {
// console.log('beforeRemove>','file', file);
return this.$confirm(`确定移除 ${file.name}？`);
},
// 文件上传-on-remove-事件-移除文件后
handleRemove(file, fileList) {
for (let i = 0; i < this.fileIds.length; i++) {
if (this.fileIds[i].uid === file.uid) {
if (!this.delFileUid) {
this.delFileUid = this.fileIds[i].imgId;
} else {
this.delFileUid =
`${this.delFileUid},` + this.fileIds[i].imgId;
}
this.fileIds.splice(i, 1);
}
}
// console.log('handleRemove>', 'delFileUid', this.delFileUid);
let params = {
id: this.delFileUid
};
this.delsData(params);
},
// 接口-删除文件
delsData(params) {
if (this.delFileUid) {
this.dels({ ids: this.delFileUid }).then(res => {
// console.log('dels', res);
this.delFileUid = '';
console.log('delsData>', 'delFileUid', this.delFileUid);
});
}
},
// 文件上传-on-error-事件
handleError(err, file, fileList) {
console.log('handleError', err, file, fileList);
},
// --------------------el-upload上传文件-结束-------------------- *
// 表单提交
submit(formName) {
console.log('ruleForm',this.ruleForm);
this.$refs[formName].validate(valid => {
if (valid) {
console.log('submit');
let imgId = [];
for (let i = 0; i < this.fileIds.length; i++) {
imgId.push(this.fileIds[i].imgId);
}
let params = {
name: this.ruleForm.name,
fileIds: imgId
};
// 提交接口
this.interfaceName(params)
.then(res => {
console.log(res);
if (res.code === 1) {
this.$confirm(`提交成功`, '系統提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showCancelButton: false,
customClass: 'confirm-success',
type: 'success'
})
.then(() => {
this.$router.push('');
})
.catch(() => {
// this.$message.info('已取消');
});
} else {
// this.$message.error(res.msg);
}
this.fileIds = [];// 清除待文件序列
this.resetFormDetail();
this.$refs.upload.clearFiles();// 清除上传列表
})
.catch(err => {
console.log(err);
});
} else {
console.log('error submit!!');
return false;
}
});
},
// 方法-重置表单
resetFormDetail() {
this.formDetail.name = '';
},
}
}
</script>
二、input等的change事件中传递自定义参数
通过鼠标或键盘输入字符
Input 为受控组件，它总会显示 Vue 绑定值。
通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。
不支持 v-model 修饰符。
一、无效写法
@change="doSomething(val, index)"
<div v-for="(item,index) in itemList">
<el-input v-model="item.value" @change="doSomething(val, index)"> </el-input >
</div>
二、有效写法
@change="((val)=>{changeStatus(val, index)})"
<div v-for="(item,index) in itemList">
<el-input v-model="item.value" @change="((val)=>{doSomething(val, index)})"> </el-input>
</div>
网友评论