vue用element来实现上传图片和修改图片功能丨本际云推荐

vue用element来实现上传图片和修改图片功能

图片上传模块简介

我是本际云服务器推荐网的小编小本本，今天要和大家分享一下关于项目要求上传图片的模块，上传图片比较简单，但是在保存图片后需要进行编辑，这个就需要进行一些路径处理了。

vue用element来实现上传图片和修改图片功能

应用场景

1.上传图片并进行放大预览。

2.图片上传代码。直接将图片上传到接口，成功后返回图片路径，表单提交时，后台要路径拼成的字符串格式，类似str=‘/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg’；下面会介绍路径处理方法。

    <el-upload
    :action="上传图片接口地址"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-success="imgSuccess"
    :on-error="imgError"
    :on-remove="imgRemove">
    <i class="el-icon-plus"></i>
    </el-upload>

修改已经上传的图片，并展示到图片列表中

1.展现效果。先展示原来的图片，再上传新图片，也可删除原来的图片。

2.编辑代码。

编辑组件代码

    <el-upload
    :action="上传图片接口地址"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-success="imgSuccess1"
    :on-error="imgError1"
    :on-remove="imgRemove1"
    :file-list="fileList2">
    <i class="el-icon-plus"></i>
    </el-upload>

处理获取到的图片路径，并进行处理展示到列表

    // 表格编辑按钮
    tableBianji(row) {
      this.changeTanchuang = true;
      this.changeId = row.id;
      let form = { id: row.id };
      let _this = this;
      this.request("url", "GET", form, function (res) {
        if (res.code == 1) {
          _this.changeTanchuangForm = res.data;
          // 将字符串转成数组
          let arr = _this.changeTanchuangForm.up_file.split(",");
          for (let i = 0; i < arr.length; i++) {
            // 创建对象，并将路径进行ip地址拼接
            let obj = { url: _this.requestUrl + arr[i] };
            // 放进图片列表
            _this.fileList2.push(obj);
          }
        } else {
          _this.$message({ message: res.msg, type: "error" });
        }
      });
    }

编辑图片插件的方法

    imgRemove1(file, fileList) {
      this.fileList1 = fileList;
    },
    imgSuccess1(res, file, fileList){
      this.fileList1 = fileList;
    },
    imgError1(res) {
      this.$message({ type: "error", message: "附件上传失败" });
    }

获取最后列表存在的图片

    // 先判断图片是否更改
    if (this.fileList1.length==0) {
      // 如果为0，则表示没有对图片进行编辑，则不用更改任何东西
    } else {
      // 图片进行了一些操作，包括删除、新增
      let arr = [];
      // 判断是否是新上传的
      this.fileList1.map((item,index)=>{
        if (item.response) {
          // 是新上传的，将路径放进数组
          arr.push(item.response.data.url);
        } else {
          // 原来存在的，将路径进行截取后放进数组
          let str = '/uploads' + item.url.split('/uploads')[1];
          arr.push(str);
        }
      })
      // 处理后的路径字符串
      let up_file = arr.join(',');
    }

以上是结合Vue和ElementUI进行图片上传和编辑的操作，重点就是对图片路径的处理，根据后台返回数据的不同格式，定义好相应的路径处理方法。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7163.html