效果:
未上传:
上传成功:
html:
<a-upload name="avatar" list-type="picture-card" class="avatar-uploader img-upload"
:multiple="false"
:before-upload="value=>beforeUpload(value,1)"
:customRequest="uploadImage"
:file-list="fileList1"
@preview="handlePreview(1)"
@change="handleChange"
:remove="file=>deleteFileItem(file,1)">
<div v-if="fileList1.length < 1">
<a-icon :type="loading1 ? 'loading' : 'plus'" />
<div class="ant-upload-text">
上传
</div>
</div>
</a-upload>
css:
.avatar-uploader>.ant-upload {
width: 128px;
height: 128px;
}
.img-upload{
width: auto;
flex: 1;
}
data:
fileList1: [],
loading1: false,
currentImg:'',
js:
//删除上传的图片
deleteFileItem(file,indexs) {
if(indexs){
this.currentImg=indexs
}
//找到当前文件所在列表的索引
let index = this[`fileList${this.currentImg}`].indexOf(file);
//从列表中移除该文件
this[`fileList${this.currentImg}`].splice(index, 1);
return true;
},
//上传之前的校验
beforeUpload (file,index) {
this.currentImg=index
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.$message.error('只能上传图片!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('图片必须小于2MB!');
}
return isJpgOrPng && isLt2M;
},
//该方法当上传列表新增上传和删除上传项都会执行,我们可以通过状态来获取最新的fileList内容,其中状/态有loading,removed,done。
handleChange(data) {
if (data.file.status == "removed") {
this[`fileList${this.currentImg}`] = data.fileList;
}
},
//图片预览
async handlePreview(index) {
if(index==3){
this.previewImage=this.form3.real_phone+'?v=1234'
}else if(index==4){
this.previewImage=this.form3.real_industry+'?v=1234'
}else{
this.previewImage=this.form3[`img${index}`]+'?v=1234'
}
this.previewVisible = true;
},
uploadImage(file) {
const formData = new FormData();
formData.append("file", file.file);
this.saveFile(formData);
},
saveFile(file) {
let _this=this
this[`loading${this.currentImg}`]= true;
$.ajax({
url:'xxx',
data:file,
type:'post',
contentType:false,
processData:false,
success:function(backData){
_this[`loading${_this.currentImg}`]= false;
_this[`fileList${_this.currentImg}`].push({
uid: _this[`fileList${_this.currentImg}`].length + 1,
name: backData.result,
status: "done",
url: backData.result,
});
_this.$message.success(backData.message);
},
error:function(backData){
_this[`loading${_this.currentImg}`]= false;
_this.$message.error(backData.message);
},
})
},