上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。如何使用Ant-design-vue中的a-upload上传组件进行图片或者视频的上传呢？
template中:
<a-form-model-item label="图片" prop="sheetPicture"><div style="display: flex; align-items: center"><a-upload name="avatar" class="avatar-uploader" action :customRequest="uploadImage" list-type="picture-card" :file-list="fileList" :show-file-list="false" :before-upload="beforeUpload" :remove="handleDeleteChange" accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG,.gif,.GIF"><div v-if="!defectSearchForm.sheetPicture"><a-icon type="plus" /><div class="ant-upload-text">上传</div></div><img v-else :src="defectSearchForm.sheetPicture" alt="avatar" /></a-upload><a-tooltip placement="right"><template slot="title"><span>上传前请确认无误后再进行上传或删除操作</span></template><a-icon type="info-circle" /></a-tooltip></div></a-form-model-item>
js中：
定义data：
data(){return {loading: false,fileList: [],defectSearchForm: {},}}
详情信息获取：
//根据id查询缺陷详情 (根据id获取详情的API getDefectSearchById)getDefectSearchInfoById(id) {let _this = this;getDefectSearchById(id).then(({ data: res }) => {if (res.code != 0) {_this.$message.config({maxCount: 1,});_this.$message.destroy();return _this.$message.error(res.data);}console.log('缺陷详情', res);if (JSON.stringify(res.data) != '{}') {_this.defectSearchForm = res.data;if (_this.defectSearchForm.sheetPicture) {_this.fileList = [{uid: '-1',name: 'image.png',status: 'done',url: _this.defectSearchForm.sheetPicture}];} else {_this.fileList = [];}}}).catch((error) => {console.log(error);return false;});},
图片上传部分：
//图片上传(上传图片API updateImage: '/sys/oss/upload')uploadImage(file) {let _this = this,data = file.file,fileParams = new FormData();_this.loading = true;fileParams.append('file', data);console.log('fileParams', fileParams);updateImage(fileParams).then(({ data: res }) => {if (res.code != 0) {_this.loading = false;return _this.$message.error(res.msg);}_this.defectSearchForm.sheetPicture = 'http://' + res.data.src;_this.loading = false;});},beforeUpload(file) {const isType = file.type === 'image/jpeg' || 'image/png' || 'image/jpg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isType) {this.$message.config({maxCount: 1,});this.$message.destroy();this.$message.error('图片格式错误,请上传图片!');}if (!isLt2M) {this.$message.config({maxCount: 1,});this.$message.destroy();this.$message.error('上传头像图片大小不能超过 2MB!');}return isType && isLt2M;},// 删除项目图片(删除图片API deleteImage: '/sys/oss/delete')handleDeleteChange(file) {console.log('图片删除');console.log('file',file);let deletePlantInfoImgurl = file.url.substr(file.url.lastIndexOf('/') + 1);deleteFile(deletePlantInfoImgurl).then((res) => {if (res.code != 0) {return this.$message.error(res.data || res.msg);}this.plantInfo.imgurl = '';this.fileList = [];this.$message.success('删除成功');return;});},
效果：
如果你要实现大图预览的话：
previewVisible: false,previewImage: '',
<a-upload name="avatar" class="avatar-uploader" action @preview="handlePreview" :showUploadList="false" :customRequest="uploadImage" list-type="picture-card" :file-list="fileList" :show-file-list="false" :before-upload="beforeUpload" :remove="handleDeletePlantImageChange" accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG,.gif,.GIF"><div v-if="!defectSearchForm.sheetPicture"><a-icon type="plus" /><div class="ant-upload-text">上传</div></div><img v-else :src="defectSearchForm.sheetPicture" class="avatar" /></a-upload><!-- 此处添加预览，注意 :showUploadList="true" 预览才能使用 --><a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal>
//预览图片async handlePreview(file) {console.log('file',file)if (!file.url && !file.preview) {file.preview = await getBase64(file.originFileObj);}this.previewImage = file.url || file.preview;this.previewVisible = true;},//取消预览handleCancel(){this.previewVisible = false;},
其中 :showUploadList="false" 是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon。此时预览和删除功能消失，如果想更换图片，直接点击即可！
总结：
当然，代码肯定不能完全拿来用，可以参考某一部分，这个上传的图片是保存到了第三方的存储平台拿的url，具体看你自己需求吧！
