html代码
<h2>图片</h2><div class="content"><a-uploadaction="https://xxxx"list-type="picture-card":file-list="fileList"@preview="handlePreview"@change="handleChange":disabled="mode==='readonly'"><!-- <div v-if="fileList.length <= 1"> --><div><a-icon type="plus" /><div class="ant-upload-text">上传图片</div></div></a-upload><a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage"/></a-modal></div>
//图片handleCancel() {this.previewVisible = false;}, // 查看图片async handlePreview(file) {if (!file.url && !file.preview) {file.preview = await getBase64(file.originFileObj);}this.previewImage = file.url || file.preview;this.previewVisible = true;// console.log(this.previewImage)},// 图片选择async handleChange({fileList}) {// console.log(fileList)this.form_data.image = [];if(fileList.length > 0){if (!fileList[0].url && !fileList[0].preview) {this.form_data.image = await getBase64(fileList[0].originFileObj);console.log(this.form_data.image)}this.fileList = fileList;console.log(this.fileList)}else{this.form_data.image = [];this.fileList = [];// console.log(this.fileList)}},
图片上传js
// 图片上传imgfile(){let imgfilelist = [];this.fileList.filter((a)=>{// console.log(a.originFileObj);imgfilelist.push(a.originFileObj)})let formData = new FormData(); //创建form对象let config = {headers:{'Content-Type': 'multipart/form-data',transformRequest: [data => data]},processData :true,};// 上传多张图片，必须遍历for(let item of imgfilelist){formData.append('img',item)}this.$axios.post('/xx/xx/xx/',formData,config).then(response => {if(response.retcode == 200){console.log(response); }}); },
