HTML文件
<img v-if="!upload1" class="uploadSuccess" :src="photoSRC.src1" />
<div v-else="upload1">
<label class="upload" for="up1">+</label>
<input type="file" name="" id="up1" accept="image/png,image/gif,image/jpeg" @change="update1"/>
</div>
js文件
//data保存
data () {
return {
upload1: true,
}
},
// 上传图片函数
update1 (e) { // 上传照片
var self = this
let file = e.target.files[0]
/* eslint-disable no-undef */
let param = new FormData() // 创建form对象
param.append('file', file, file.name) // 通过append向form对象添加数据
param.append('chunk', '0') // 添加form表单中其他数据
// console.log(param.get('file')) // FormData私有类对象,访问不到,可以通过get判断值是否传进去
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
this.axios.post('mno/file/uploadCertificationPhoto', param, config)
.then(response => {
if (response.data.code === 0) {
self.ImgUrl = response.data.data;
this.upload1 = true;
}
this.upload1 = false;
this.photoSRC.src1 = response.data;
this.photoURL.push(response.data);
})
},
css文件
.upload-success {
width: 80px;
height: 80px;
}