<template>
<div class="">
<!-- 选择后预览 -->
<img v-if="imgOneUrl" :src="imgOneUrl" alt="">
<!-- 默认图片 -->
<img v-else src="@/assets/images/upImg-1.png" alt="">
<input type="file" name="file[]" class="file" accept="image/*" @change="upImgOne($event)">
</div>
</template>
<script>
export default {
data(){
return{
imgOne:‘‘,
imgOneUrl:‘‘,
}
},
methods:{
//选取并解读照片信息
upImgOne(e) {
this.imgOne = e.target.files[0];
let reads = new FileReader();
reads.readAsDataURL(this.imgOne);
reads.onload = () => {
this.imgOneUrl = reads.result;
this.upLodeImg() //多次上传文件多次调用这个方法，需要传参0,1,2
}
},
upLodeImg(){
var formData = new FormData() // 声明一个FormData对象
var formData = new window.FormData()
formData.append(‘file‘, document.querySelector(‘input[type=file]‘).files[0])
//formData.append(‘file‘, document.querySelectorAll(‘input[type=file]‘)[index].files[0]) //每次只上传单个文件，
$.ajax({
url: config.API + ‘/api/user/upload/xxx‘ ,
type: ‘POST‘,
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (resp) {
console.log(resp);
},
error: function (error) {
alert(error);
}
});
},
},
mounted:function(){}
}
</script>
<style scoped>
</style>
upLodeImg(index){
var formData = new FormData() // 声明一个FormData对象
var formData = new window.FormData()
formData.append(‘file‘, document.querySelectorAll(‘input[type=file]‘)[index].files[0])
formData.append(‘token‘, this.token)
// let data = {
// token:this.token,
// file:formData,
// methodPost:true,
// }
let that = this
let _that = this
let _this = this
let _thows = this
$.ajax({
url: config.API + ‘/api/user/upload/one‘ ,
type: ‘POST‘,
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (resp) {
console.log(resp);
let data = resp.data
if(index==0){
_thows.firImg = data.url
}else if(index==1){
that.secImg = data.url
}else if(index==2){
_that.thrImg = data.url
}else{
_this.thiImg = data.url
}
},
error: function (error) {
alert(error);
}
});
},