1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | html: <a-upload v-decorator="[ `imgUrl`, { rules: [ { required: false, message: '请选择图片' } ] } ]" :accept="engTypeMsg" listType="picture-card" :fileList="fileList" @change="handleImageChange" :custom-request="customRequest" @preview="handlePreview" :beforeUpload=" file => { beforeUpload(file); } " > <div v-if="fileList.length < 4"> <!--无图片--> <a-icon type="plus"/> <div class="ant-upload-text">上传图片</div> </div> </a-upload> method: //新增问题-上传图片-生成uid genId(length) { return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36) }, customRequest({ action, file, onSuccess, onError, onProgress }) { new Promise(resolve => { // 是个坑,必须加 if (file.reject) { return false; } const fileReader = new FileReader() fileReader.readAsDataURL(file) fileReader.onload = () => { let index = { uid: this.genId(5), name: file.name, status: 'done', //imageBase64: fileReader.result, url: fileReader.result } this.fileList = [...this.fileList.filter(item => item.status === 'done'), index] this.$message.success('文件上传成功!') // this.handleChange1() resolve(fileReader.result) } }) }, //上传图片获取base64 getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => resolve(reader.result) reader.onerror = error => reject(error) }) }, //新增问题-上传图片 handleImageChange({fileList,file}) { if (file.reject) { return false; } //let fileList = [...info.fileList] this.fileList = fileList; }, async handlePreview(file) { if (!file.url && !file.preview) { file.preview = await this.getBase64(file.originFileObj) } this.imgObj = { imageBase64: file.url || file.preview }; this.previewVisible = true }, |
声明: 本文由( zongyan86 )原创编译,转载请保留链接: antdui上传图片转base64