我做的項目最近要實現一個上傳圖片的功能,后端需要base64的格式。使用圖片轉base64格式,再發給后端,后端只需將轉碼結果存入數據庫即可,前端調用接口獲取到base64數據轉碼后的數據。再寫入img src 標簽即可。
主要思路:
通過new FileReader()把上傳的圖片轉為base64的格式,將轉換后的數據給data中的imageUrl,將imageUrl作為參數提交到后臺。我這邊后端會返回一個經過處理后的網絡地址,最后把這個網絡地址賦值給 :src="headImg"就可以了。最后點擊保存的時候,把圖片保存起來。也是調用保存的接口。
html代碼:圖片會顯示在img中,input用于點擊上傳,input中調用了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()代碼:我這里把轉換后的數據給了id為base64Img的src屬性,同時也給了data中的imageUrl,用于后面向后臺發送請求
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);
//把轉換后的數據給id為base64Img的src屬性
console.log(reader.result);
that.imageUrl = reader.result
that.updataImg()
//這里調用了向后臺發請求的代碼
}
if (file) {
reader.readAsDataURL(file);
}
},
updataImg()代碼:其實只用傳轉換出來的數據就行,我這邊后臺需要一個type參數用于判斷,所以傳了兩個參數。
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('返回的數據',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);
});
}
點擊保存時。調用保存的接口:把headImg的路徑,拼接其他的數據中
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);
});
這篇文章用于記錄我是如何轉換圖片為base64的。寫的不好之處請大佬指點