Vue图片上传及回显

技术点：

1. 如何将上传文件的不完全路径转换成base64编码格式的字符串
2. 接收到后台返回的图片url路径如何获取并写入到数据库中
3. 其他组件调用数据库中图片的路径地址进行回显

我们需要做的操作如下：

1、创建一个组件去接收文件（本次使用的为input组件）

 

2、当上传文件或者上传文件发生改变时触发selectImageURL事件，如下：

    /* 上传图片到fastdfs，然后返回url地址 */
    selectImageURL (e) {
      /*  定义全局 */
      var vm = this;
      /*  获取上传文件的信息 */
      var file = e.srcElement.files[0];
      /*  将上传的文件的路径地址转换成blob格式 */
      var imgURL = window.URL.createObjectURL(file); 
      /*  定义一个FileReader,FileReader可以读取到文件中的内容 */
      var a = new FileReader();
      /* FileReader的onload事件(文件读取成功完成时触发) */
      a.onload = function(e) {
        /* 定义参数PicturePath */
        var PicturePath;
        /* 获取base64数据 */
        this.getImgsrc = e.target.result;
        /*  post事件,将获取到的base64数据传给后台,然后将上传到FastDFS后返回的url地址传回来 */
        var addurl = vm.apiUrl+ "/OrderSystem/MatchMenu/upLoadFoodPictur";
        axios
          .post(addurl, {
            PicturePath: this.getImgsrc
          })
          .then(function(response) {
            var backImage;
            backImage = response.data;
            /* 将返回来的地址写进本地缓存 */
            localStorage.setItem("backImage",backImage);
          })
          .catch(err => {
            console.log(err);
          });
      };
      a.readAsDataURL(file);
    },

 

3、目前只是将文件上传到FastDFS，然后返回来一个URL地址，但是并没有将其写进数据库中，所以下一步我们需要将返回来的URL地址写入数据库

    /* 向数据库中添加菜品 */
    addFood() {
      /*  定义全局 */
      var vm = this;
      /*  将存放到缓存中的URL地址取出来 */
      var image = localStorage.getItem("backImage");
      /*  点击按钮将数据写入数据库 */
      var addurl =
        vm.apiUrl +
        "/OrderSystem/MatchMenu/addNewFood";
      axios
        .post(addurl,{
          /*  需要写进数据库的参数 */
          foodName: vm.nameForFood,
          foodTypeId: vm.getFoodTypeId,
          price: vm.priceForFood,
          imgsrc: image,
          foodState: 't',
          whetherUse: 'y',
          defaultNum: '1'
        })
        .then(function(response) {
          if (response.data == true) {
            vm.getFoodInfo();//刷新页面
            vm.$Message.info("添加成功");        
          } else {
            vm.$Message.info("添加失败"); 
          }
        })
        .catch(err => {
          console.log(err);
        });
        /*  清除缓存 */
        localStorage.removeItem('backImage');
    },

4、因为我们使用的是vue自己封装好的table组件，然后图片要显示在table的某一列上，所以要使用render去渲染，操作如下

        /*  Table组件中,图片所在列的含义 */
        {
          /*  标题 */
          title: '食物图片',
          /*  键值 */
          key: 'imgsrc',
          align: "center",
          render: (h, params) => {
            return h("img", {
              /*  组件样式 */
              style: {
                width: "100px",
                height: "80px",
                "border-radius": "5%"
              },
              /*  html属性 */
              attrs: {
                /*  图片的路径,直接采用后台返回的键值 */
                src: params.row.imgsrc,
                
              }
            });
          }
        },

 

---

总结：问题总是有解决办法的！