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

		<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>

 // 上传成功
    imgSuccess(res, file, fileList) {
      this.fileList = fileList;
      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
    },
    // 上传失败
    imgError(res) {
      this.$message({
        type: "error",
        message: "附件上传失败",
      });
    },

    // 删除图片
    imgRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 附件上传图片预览事件，这个就是将路径直接放进一个弹窗显示出来就可以了

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 处理图片路径
    setImgUrl(imgArr) {
      let arr = [];
      if (imgArr.length>0) {
        for (let i = 0; i < imgArr.length; i++) {
        const element = imgArr[i];
        arr.push(element.response.data.url);
        //这个地方根据后台返回的数据进行取值，可以先打印一下
      }
      return arr.join();
      } else {
        return ''
      }
      
    },

		<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(',')
          }