nas怎么做自己的网站吉林网站seo

介绍：

1.单个与多个，就是限制个数不一样；其次就是v-model，一个是字符串，一个是数组，获取详情和提交时map生成fileList就可以了。
2.图片都可预览删除，超过限制后上传按钮隐藏。

一、单个上传：

效果如图：


html:

<el-form :model="newTeam" status-icon :rules="newTeamRules" ref="newTeam" label-width="120px" class='docorTeam'> <el-Row><el-form-item label="上传头像：" prop="headUrl" size="small" :rules="[{ required: true, message: '请上传', trigger: 'change'}]"><el-upload:action='$my.api+"/upload/upload"'list-type="picture-card"name='files':file-list="fileList":limit="1":class="{imgHide:hideUpload}":on-preview="handlePictureCardPreview":on-success='uploadOk':on-remove="handleRemove":on-change="imgChange"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item>
</el-Row> <el-footer class="posFix bottom0 left0 bgf foot flex alic juste"><el-button @click="isShowDetail = false" size="small">返回</el-button><el-button type="primary" @click="submitNewTeam('newTeam')" size="small">提交</el-button></el-footer>
</el-form>

data:

data() {return {newTeam:{headUrl:''},newTeamRules: {headUrl: [{ required: true, message: '请输入', trigger: 'blur'}],},isShowDetail:false,dialogImageUrl: '',dialogVisible: false,fileList: [],hideUpload: false,}
},

methods：

handleRemove(file, fileList) {console.log(file, fileList)this.fileList = fileListthis.newTeam.headUrl = ''this.hideUpload = fileList.length >= 1;
},
handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;
},
uploadOk(response, file, fileList) {console.log(response, file, fileList)this.fileList.push({name:file.name,url:response})this.newTeam.headUrl = response
},
imgChange(file,fileList){this.hideUpload = fileList.length >= 1;
},
submitNewTeam(formName){ //新增this.$refs[formName].validate((valid) => {if (valid) {//操作this.hideUpload = falsethis.fileList = []} else {console.log('error submit!!');return false;}});
},

css:

.foot{margin-left: 200px;width:calc(100% - 200px)}
//修改组件大小为100px
.docorTeam >>> .el-upload--picture-card{width:100px;height: 100px;line-height: 106px;}
.docorTeam >>>.el-upload-list--picture-card .el-upload-list__item{width:100px;height: 100px;}
//隐藏上传按钮
.imgHide >>> .el-upload--picture-card {display: none;
}

二、多个上传：

效果如图：

html:

<el-form status-icon :model="imgForm" ref="imgForm"  label-width="100px"> <el-Row><el-form-item prop="url" size="small" :rules="[{ required: true, message: '请上传', trigger: 'change'}]"><el-upload:action='$my.api+"/upload/upload"'list-type="picture-card"name='files':class="{imgHide:hideUpload}":file-list="fileList":limit="5":on-preview="handlePictureCardPreview":on-success='uploadOk':on-remove="handleRemove":on-change="imgChange"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item></el-Row>
</el-form>
<span slot="footer" class="dialog-footer"><el-button @click="dialogImgVisible = false">取 消</el-button><el-button type="primary" @click="submitImg('imgForm')">确 定</el-button>
</span>

data:

data() {return {dialogImgVisible:false,dialogImageUrl: '',dialogVisible: false,fileList: [],imgForm:{url:'',},hideUpload: false,}
},

methods:

showUpImg(val){this.rowData = valthis.hideUpload = falsethis.fileList = []this.formDetail.imageId = ''this.dialogImgVisible = true
},
handleRemove(file, fileList) {console.log(file, fileList)this.fileList = fileListthis.hideUpload = fileList.length >= 5;
},
handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;
},
uploadOk(response, file, fileList) {console.log(response, file, fileList)this.fileList.push({name:file.name,url:response})
},
imgChange(file,fileList){this.hideUpload = fileList.length >= 5;
},
submitImg(formName){let arr = []this.fileList.map((item)=>{arr.push(item.url)})let data ={url:arr.join(','),}this.imgForm.url = arr.join(',')this.$refs[formName].validate((valid) => {if (valid) {this.$axios.post(this.$my.api + '/bms/healRecord/saveImage', data).then(res => { if(res.data&&res.data.code === 200){  }else{} }).catch(function (error) {})} else {console.log('error submit!!');return false;}});
},

css:

.imgHide >>> .el-upload--picture-card {display: none;
}