快捷導(dǎo)航

使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式

更新時間：2024年05月24日 11:24:03 作者：數(shù)學(xué)分析分析什么？

這篇文章主要介紹了使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

ElementUI中el-upload上傳文件轉(zhuǎn)base64格式

<el-upload class="upload-demo" ref="upload" action="" :on-change="httpRequest" :on-remove="httpRequest" :file-list="fileList" :auto-upload="false">
	<el-button slot="trigger" size="small" type="primary">選取文件</el-button>
</el-upload>

    data() {
		return {
			fileList: [],
			upLoadFile: []
		}
	},
	methods: {
		async httpRequest(file, fileList) {
			this.upLoadFile = []
			for (let i in fileList) {
				this.upLoadFile[i] = await this.getBase64(fileList[i].raw)
			}
			console.log('上傳文件列表', this.upLoadFile)
		},
		// 轉(zhuǎn)base64碼
		getBase64(file) {
			return new Promise((resolve, reject) => {
				const reader = new FileReader()
				let fileResult = ''
				reader.readAsDataURL(file)
				// 開始轉(zhuǎn)
				reader.onload = () => {
					fileResult = reader.result
				}
				// 轉(zhuǎn) 失敗
				reader.onerror = error => {
					reject(error)
				}
				// 轉(zhuǎn) 結(jié)束
				reader.onloadend = () => {
					resolve(fileResult)
				}
			})
		},

el-upload 組件上傳圖片多張轉(zhuǎn)換為base64

根據(jù)后臺的需求，需要把圖片處理為base64傳給他，直接上代碼。

圖片顯示正常

			<el-upload
              ref="upload1"
              action=""
              list-type="picture-card"
              multiple
              :http-request="beforeAvatarUpload"
              :limit="limit"
              :on-exceed="onExceed"
              :on-remove="onRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>


// 自定義上傳方法 處理圖片轉(zhuǎn)化為base64
beforeAvatarUpload(file){
	const self = this;
	let reader = new FileReader();
	reader.readAsDataURL(file.file);
	reader.onload = function (e) {
		let img_base64 = e.target.result.split(",")[1];
		// 自定義數(shù)組對象，傳給后臺的數(shù)據(jù)
		self.imgBase64Array.push({ base64Str: img_base64 });
	}
},
// 限制提示
onExceed() {
	this.$message({
        message: "最多上傳6張圖片",
        type: "warning",
    });
},
onRemove(file, fileList) {},

// 提交代碼
onSubmit(){
			// 判斷  1無照片到有照片  2  有照片 但未新增  頁面進行刪除  3  在原有基礎(chǔ)上進行新增照片（也包括原有基礎(chǔ)刪除但未刪除全部，再新增）
			var that=this
            if (this.imgBase64Array.length > 0 && this.form.imgs.length == 0) {
              this.form.imgs = this.imgBase64Array;
              console.log("1無照片到有照片", this.form.imgs);
            } else if (
              this.imgBase64Array.length == 0 &&
              this.form.imgs.length > 0
            ) {
              this.form.imgs = this.form.imgs;
              console.log("2  有照片 但未新增  頁面進行刪除", this.form.imgs);
            } else if (
              this.imgBase64Array.length > 0 &&
              this.form.imgs.length > 0
            ) {
              this.form.imgs = [...this.imgBase64Array, ...this.form.imgs];
              console.log("3  在原有基礎(chǔ)上進行新增照片", this.form.imgs);
            }else if (
              this.imgBase64Array.length == 0 &&
              this.form.imgs.length == 0
            ) {
              this.form.imgs = [];
              console.log("4  在原有基礎(chǔ)上進行刪除照片 未新增", this.form.imgs);
            }

            // console.log(that.form.imgs)
            var res = await geSchoolUpdateDetail(that.form);
            console.log(res);
            if (res.flag === 1) {
              that.$message.success("修改成功");
             // 清空圖片
              this.$refs.upload1.clearFiles();
            }
},

圖片顯示如上，在線地址顯示有點問題找后臺重新對啦（這個大家就不要太在意）

上傳成功以后后臺返回url頁面

顯示代碼如下：

<div class="imgs" v-if="form.imgs && form.imgs.length > 0">
	<div v-for="(img, index) in form.imgs" :key="index">
    	<img :src="img.url" alt="" />
        <el-button class="delbutton" type="danger" size="small" @click="deleteImg(img.id)">刪 除</el-button>
    </div>
</div>

// 刪除圖片
deleteImg(id) {
	var index;
    var arr = this.form.imgs;
    arr.map((item, i) => {
        if (item.id == id) {
          index = i;
          arr.splice(index, 1);
        }
   	});
    this.form.imgs = arr;
},