ELEMENT照片墙，你还不会用？我教你简单的前后端交互。

ELEMENT 照片墙简单操作
作者：秋名
这几天使用ELEMENT框架的照片墙，发现有点小缺点，在网上找了很多方法，自己都没有解决，最后天无绝人之路，感谢CSDN，感谢各位愿意分享的大佬,解决之后真香。

需求：使用ELEMENT框架，只需要上传一张照片，然后隐藏加号。上传后获取路径进行BES64转换后，和文字一起传到后台将图片保存本地。
撰写时间：2021 年 01 月 09 日

ELENMENT官网

未上传的样子：

上传后：

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第一篇博客，愿自己在新的一年多吃点苦，多长点见识，在拼搏的年纪不要选择安逸！加油吧，干饭人。