v-model two-way data binding binding: value="item.v"
So I can get the id value of the community through this.village
label: refers to the displayed word, for example:
value: refers to the value
When getting:
v is the key name, which should correspond to the field name of the backend.
upload image
<el-form :label-position="labelPosition" class="picture_form">
<el-form-item label="上传照片">
<div class="pictureList" v-for="(item, index) in pictureList" :key="index" v-show="isShow">
<img src="../../../assets/images/icon_quxiao.png" alt="" class="cancel" @click="cancel($event, index)">
<!-- <img src="../../../assets/images/" alt=""> -->
<!-- <div style="background: red; width: 60px; height: 60px;"></div> -->
<img :src="item.url" alt="" style=" margin-left: 0;" id="images">
</div>
<button class="addpicture">
<form enctype="multipart/form-data">
<input type="file" name="file" multiple="multiple" accept="image/*" @change="upload($event)" style="opacity:0;width:100%;height:100%;position:absolute;top:0;left:0">
</form>
</button>
<!-- <img src="../../../assets/images/icon_add.png" alt="" @click="choose"> -->
</el-form-item>
</el-form>data(){
return{
pictureList : [ { } ]
}
}
// 上传图片
upload(event) {
console.log('上传图片');
// console.log(event.target.files);
var formData = new FormData()
formData.append('userfile', document.querySelector('input[type=file]').files)
console.log(formData.get('userfile'));
var d = localStorage.getItem('userId')
var t = localStorage.getItem('token')
var options = { // 设置axios的参数
url: 'https://web.eylives.cn/deal/repair_wechat_upload.ashx?d='+ encodeURIComponent(d) + '&t=' + encodeURIComponent(t),
data: formData,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$http(options).then((res) => {
console.log('成功请求',res);
// this.pictureList[this.pictureList.length] = res.data
// console.log(this.pictureList);
let newPictureList = [{}]
for(let i =0; i < newPictureList.length; i++) {
newPictureList[i] = {
url: res.data
}
}
this.pictureList = newPictureList
console.log(this.pictureList);
this.isShow = true
this.$message.success('文件上传成功', { icon: 5 });
}).catch((err) => {
console.log('失败请求', err);
this.$message.error('文件上传失败', { icon: 5 });
}) // 发送请求
},encodeURIComponent(): The string can be encoded as a URI component.
Don't be afraid of floating clouds to cover your eyes, just because you are in this mountain.
It's okay, just learn it and use your brain for small things.
come on wow