我做的項目最近要實現(xiàn)一個上傳圖片的功能，后端需要base64的格式。使用圖片轉(zhuǎn)base64格式糙臼，再發(fā)給后端，后端只需將轉(zhuǎn)碼結(jié)果存入數(shù)據(jù)庫即可恩商，前端調(diào)用接口獲取到base64數(shù)據(jù)轉(zhuǎn)碼后的數(shù)據(jù)变逃。再寫入img src 標(biāo)簽即可。
主要思路：
通過new FileReader()把上傳的圖片轉(zhuǎn)為base64的格式怠堪，將轉(zhuǎn)換后的數(shù)據(jù)給data中的imageUrl,將imageUrl作為參數(shù)提交到后臺揽乱。我這邊后端會返回一個經(jīng)過處理后的網(wǎng)絡(luò)地址，最后把這個網(wǎng)絡(luò)地址賦值給 :src="headImg"就可以了粟矿。最后點擊保存的時候凰棉，把圖片保存起來。也是調(diào)用保存的接口陌粹。
html代碼：圖片會顯示在img中撒犀，input用于點擊上傳，input中調(diào)用了toBase64()方法。
<div class="upload_list">
<img
class="layui-upload-img"
name="titleBase64Img"
id="base64Img"
:src="headImg"
/>
<div class="fileInput">
<input
type="file"
id="Updateimage"
lay-verify="required"
@change="toBase64()"
accept="image/jpeg, image/png, image/jpg"
/>
</div>
</div>
<script>
var qs = require("qs");
export default {
data() {
return {
headImg:"",
imageUrl: "",
type:''
};
},
</script>
toBase64()代碼：我這里把轉(zhuǎn)換后的數(shù)據(jù)給了id為base64Img的src屬性或舞，同時也給了data中的imageUrl,用于后面向后臺發(fā)送請求
toBase64(){
var that = this
var file = document.querySelector('input[type=file]').files[0];
console.log("base64",file)
var reader = new FileReader();
reader.onloadend = function () {
$("#base64Img").attr("style","display:inline-block");
$("#base64Img").attr("src",reader.result);
//把轉(zhuǎn)換后的數(shù)據(jù)給id為base64Img的src屬性
console.log(reader.result);
that.imageUrl = reader.result
that.updataImg()
//這里調(diào)用了向后臺發(fā)請求的代碼
}
if (file) {
reader.readAsDataURL(file);
}
},
updataImg()代碼：其實只用傳轉(zhuǎn)換出來的數(shù)據(jù)就行荆姆，我這邊后臺需要一個type參數(shù)用于判斷，所以傳了兩個參數(shù)映凳。
updataImg(){
var that = this
var json = {};
json.imageBase64Str = that.imageUrl;
json.type = 1;
this.$http
.post(
"/bpdm/servlet/MemberServlet?method=ImageUploadingforPc",
qs.stringify(json, { indices: false })
)
.then(res => {
console.log('返回的數(shù)據(jù)',res.data.data)
if (res.data.code == 200) {
that.headImg = res.data.data.imgUrl
console.log('返回的圖片',that.headImg);
this.$message({
message: '圖片上傳成功',
type: "success"
});
} else {
this.$message({
message: '圖片上傳失敗',
type: "error"
});
}
})
.catch(err => {
console.log(err);
});
}
點擊保存時胆筒。調(diào)用保存的接口:把headImg的路徑，拼接其他的數(shù)據(jù)中
this.tableData[0].headImg = headImg;
this.$http
.post(
"/bpdm/servlet/GetUserInfo?method=updateUserInfo",
qs.stringify(this.tableData[0], { indices: false })
)
.then(res => {
console.log(res.data.data);
if (res.data.code == 200) {
this.$message({
message: "保存成功",
type: "success"
});
} else {
this.$message({
message: res.data.msg,
type: "error"
});
}
})
.catch(err => {
console.log(err);
});
這篇文章用于記錄我是如何轉(zhuǎn)換圖片為base64的诈豌。寫的不好之處請大佬指點
