1、el-upload 的上传遇到的问题
要循环多个 el-upload 上传 传参问题,里面使用了bind(),进行传参。
<div class="row-item" style="width: 50%" v-for="(self, selfInx) in getSelfList" :key="selfInx">
<el-upload class="upload-demo" :ref="`uploadPictureRef${selfInx}`" :on-remove="handleFileRemove.bind(null, { index: selfInx, type: 1, fileCount: self.fileCount })" :http-request="uploadFileFuc.bind(null, { index: selfInx, type: 1, fileCount: self.fileCount })" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" action="" :file-list="self.itemValueStr">
<el-button class="user-form-search-btn" icon="el-icon-upload">上传</el-button>
</el-upload>
</div>
//文件上传
uploadFileFuc(obj, params) {
console.log(obj, params, 'obj, params'); //obj为传参的大对象,params为上传的文件信息
}
//文件删除
handleFileRemove(obj, file, fileList) {
console.log(obj, file, fileList, 'obj, params');
}
2、el-upload 上传失败的时候,如果 :show-file-list=“true” 但又不想展示上传失败的文件,可以手动去除。
也是以循环出来的,多个上传为例
uploadPictureRef${upIndex}
为自定义的ref,只要找到uploadFiles里面对应的上传失败的文件就可以了
const idx = this.$refs[`uploadPictureRef${upIndex}`][0].uploadFiles.findIndex(item => item.uid === file.uid)
this.$refs[`uploadPictureRef${upIndex}`][0].uploadFiles.splice(idx, 1)
3、在开发中,遇到了前端上传到oss上,然后在传给后端的问题。
这是上传示例
let file = params.file;
let index = file.name.lastIndexOf(".");
let type = file.name.substr(index);
let filenameTimp = `${new Date().getTime()}${type}`; //时间戳文件名
this.$clientUpload.put(filenameTimp, file).then((res) => {
if (res.res.status == 200) {
console.log('=====', res);
} else {
this.$message.error("上传失败,请重新上传!");
}
}).catch((err) => {
this.$message.error("上传失败,请重新上传!");
});
this.$clientUpload 的配置及使用
//oss.js文件
// 阿里云oss存储
const OSS = require('ali-oss')
const clientUpload = new OSS({
// region填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
region: 'oss-cn-hangzhou',
// 阿里云账号RAM用户进行API访问或日常运维。
accessKeyId: '这里填自己的',
accessKeySecret: '这里填自己的',
bucket: 'enn-gis',
timeout:1000*60*30 //上传之间限制
})
export default clientUpload
//main.js的配置
//引入oss上传文件
import clientUpload from '@/utils/oss.js'
//全局挂载
Vue.prototype.$clientUpload = clientUpload
4、上传的时候,图片和文件的校验问题
每次都会遇到,然后再去百度查,这次做个整理
let filename = params.file.name; //原文件名
let filesType = filename.substring(filename.lastIndexOf('.')).toLowerCase()
const picTypeFlag = /^.png|.jpg|.jpeg|.gif$/.test(filesType) //图片验证
const fileTypeFlag = /^.doc|.docx|.xls|.xlsx|.pdf$/.test(filesType) //文件验证
const videoType = /\.(mp4|avi|mov|flv|wmv|mkv)$/.test(filesType); //视频验证
const videoFileType = /\.(mp4|avi|mov|flv|wmv|mkv|png|jpg|jpeg|gif)$/.test(filesType); //视频+图片
5、循环 el-form 表单,以及校验问题。
<div v-for="(bigTask, index) in customerTypeArr" :key="bigTask.id">
<el-form :model="bigTask.assginForm" :ref="`customerTypeArrRef${index}`" class="demo-ruleForm">
<el-form-item label="名称" prop="name" :rules="minAssginFormRules.name">
<el-input placeholder="请输入" v-model="bigTask.assginForm.name" clearable>
</el-input>
</el-form-item>
</el-form>
</div>
//数据结构
customerTypeArr:[
{
assginForm:{
name:"",
}
}
],
minAssginFormRules:{
name: [{ required: true, message: '请输入', trigger: 'blur' },],
},
//表单校验
for (let i = 0; i < this.customerTypeArr.length; i++) {
// console.log(this.$refs[`customerTypeArrRef${i}`]);
if (this.$refs[`customerTypeArrRef${i}`]) { //如果找到这个`customerTypeArrRef${i}`,ref-继续进行表单验证
this.$refs[`customerTypeArrRef${i}`][0].validate(valid => {
if (!valid) return
console.log('----')
})
}
}
6、el-date-picker 带快捷键选项的问题(自定义快捷键)
<el-date-picker
v-model="selfTime"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="selfTimeChange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
popper-class="leftSelfCheck"
:picker-options="pickerOptions">
</el-date-picker>
pickerOptions: {
shortcuts: [
{
text: '全部',
onClick:(picker)=> {
this.changStatus(picker,0)
}
},
{
text: '最近1',
onClick:(picker)=> {
this.changStatus(picker,1)
}
},
{
text: '最近2',
onClick:(picker)=> {
this.changStatus(picker,2)
}
}
]
},
//点击事件,点击快捷选项的时候,改变按钮对应的颜色
changStatus(picker,type){
function setBackground(target) {
target.css({ color: "#409EFF" });
target.siblings("button").css({ color: "#606266" });
}
//点击某一个元素时手动添加第一次选中样式
const dom = $(picker.$el).find(".el-picker-panel__shortcut")[type];
setBackground($(dom));
},
这里有个点击时间,弹出弹框的时候,要默认选中第一个,我这里是只改变了按钮的颜色。
<style lang="scss">
.leftSelfCheck{
.el-picker-panel__shortcut:first-child{
color: #409EFF;
}
}
</style>
清空时间时,所有的按钮颜色恢复原色
$(`.el-picker-panel__shortcut`).css({'color':'#606266'});
7、el-table勾选,切换分页时,回显问题。
<el-table
:data="list"
style="width: 100%"
ref="customerManaRef"
@selection-change='handleSelectionChange'
:row-key="(row)=>{ return row.id}"
>
<el-table-column type="selection" align="center" reserve-selection> </el-table-column>
</el-table>
handleSelectionChange(val){
console.log(val);
}
8、el-cascader级联报错问题
for watcher “options”: “TypeError: Cannot read properties of null (reading ‘level’)”
在开发中,遇到使用级联选择器,新增的时候是正常的。但是在编辑的时候,级联框会打开两栏,会有报错信息。百度查找后,发现只要给el-cascader添加唯一key值即可,我这里是用时间戳,作为唯一值。
<el-cascader :key="resetCascader" v-model="value" filterable clearable collapse-tags>
</el-cascader>
this.resetCascader = new Date().getTime();