ELEMENT 照片墙简单操作
作者:秋名
这几天使用ELEMENT框架的照片墙,发现有点小缺点,在网上找了很多方法,自己都没有解决,最后天无绝人之路,感谢CSDN,感谢各位愿意分享的大佬,解决之后真香。
需求:使用ELEMENT框架,只需要上传一张照片,然后隐藏加号。上传后获取路径进行BES64转换后,和文字一起传到后台将图片保存本地。
撰写时间:2021 年 01 月 09 日
未上传的样子:
上传后:
HTML:
照片墙代码:
<el-upload
:class="{hide:hideUpload}"
action="#"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleEditChange"//通过改变事件,隐藏添加图片按钮。
:before-upload="beforeAvatarUpload14"
>
<i class="el-icon-plus"></i>
</el-upload>
放大浏览:
<el-dialog :visible.sync="dialogVisible" size="tiny">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
JS:
data() {
return {
AddBusiness: {
shopName:'',
imageurl:'',
},
dialogVisible: false,
dialogImageUrl:'',//路劲地址
hideUpload:false,
}
}
//图片上传----开始
// :class="{hide:hideUpload}"html定义一个类,决定显示还是隐藏加号按钮
//改变事件
handleEditChange (file, fileList) {
this.hideUpload = fileList.length >= 1//如果图片大于1就进行隐藏。
},
//删除图片
handleRemove(file, fileList) {
this.hideUpload = fileList.length >= 1
},
//放大图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 头像上传之前
beforeAvatarUpload14(file) {
var _this = this
return new Promise(function(resolve, reject) {
var reader = new FileReader()
reader.readAsDataURL(file)// 这里是最关键的一步,转换成base64
reader.onload = function(event) {
_this.AddBusiness.imageurl = event.target.result//定义参数获取图片路径
}
})
},
//提交给后台
AddSub(){
if(this.AddBusiness.shopName==" "){
this.$message.error('图片文字不能为空')
}
if(this.AddBusiness.imageurl==" "){
this.$message.error('图片不能为空')
}
var su3 = {
Name:this.AddBusiness.shopName,
imgdata: this.AddBusiness.imageurl
}
//封装一个请求(注意:这里需要用post提交)
Demo({su3}).then(response => {
if (response.data.type==1)
{
this.$message.success('上传成功')
}else {
this.$message.error('上传失败')
this.AddBusiness.dialogShowing = false
}
})
},
CSS:
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>
后台我用的是C#:
[HttpPost]
[ActionName("Demo")]
public IHttpActionResult Demo(JObject ject)
{
try
{
//接收参数。
JObject json = JObject.Parse(ject.ToString());
string name = ((JObject)json["su3"])["Name"].ToString();
string base64 = ((JObject)json["su3"])["imgdata"].ToString();
base64 = base64.Split(',')[1];
byte[] bt = Convert.FromBase64String(base64);
System.IO.MemoryStream stream = new System.IO.MemoryStream(bt);
Bitmap bitmap = new Bitmap(stream);
var time = DateTime.Now.ToString("yyyyMMddHHmmssfff");
//自己的后台
var ljs = "E:/image" + @"/Static/image/" + time + ".png";
//指定保存地址(需要有那个文件夹的存在哦!)
bitmap.Save(ljs);
//执行保存
}
catch (Exception)
{
return Ok(new { type = 0, Message = "上传失败,请联系管理员!"});
}
}
总结:2021第一篇博客,愿自己在新的一年多吃点苦,多长点见识,在拼搏的年纪不要选择安逸!加油吧,干饭人。