vue实践笔记--上传图片 el-upload标签

主要解决两个问题:
1,上传一张图片,再上传一张,原来的被覆盖
2,怎么获得上传的图片的地址?

总代码如下:

<el-form-item label="*图片:">
              <el-upload
                ref="upload"
                :file-list="fileListData"
                :action="actionUrl"
                list-type="picture-card"
                :multiple="true"
                name="files"
                :on-remove="handleRemove"
                accept="image/*"
                :before-upload="beforeUpload"
                :with-credentials="true"
                :on-success="imgUploadSuccess"
                :on-error="imgUploadFalse"
                :limit=100
                :headers="uploadHeader"
                :on-preview="handlePictureCardPreview">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

data里面:

fileUploadJson:[],

methods里面:

methods: {
    //批量驳回覆盖之前上传的文件
    handleChange(file,fileList){
      if(fileList.length>1){
        fileList.splice(0,1);
      }
    },
    beforeUpload(file){
        this.fileUploadJson.push({url:file.url});
    },
    imgUploadSuccess(response, file, fileList){
  for(var i =0 ;i<this.fileUploadJson.length;i++){
    if(this.fileUploadJson[i].name === file.name){
      **this.fileUploadJson[i].url = response.data;**//this.fileUploadJson[i].url就是图片的地址
    }
  }

  this.listQuery.imgUrl=response.data;//将图片的地址赋值给自己想要赋值的属性: this.listQuery.imgUrl
},
    }

关于解答第一个问题:
注意:因为上面的代码的样式是图片+,也有删除,所以没有覆盖那个问题了,但是如果想要覆盖,就是下面两个步骤
主要有两点:
1,:el-upload里面;

on-change=" handleChange"

2,methods里面:

 //批量驳回覆盖之前上传的文件
    handleChange(file,fileList){
      if(fileList.length>1){
        fileList.splice(0,1);
      }
    },

关于解答第二个问题:
1,el-upload里面:

:before-upload="beforeUpload" 

 :on-success="imgUploadSuccess"
 2,data里面:

fileUploadJson:[],

3,methods里面:

beforeUpload(file){
this.fileUploadJson.push({url:file.url});
},

imgUploadSuccess(response, file, fileList){
      for(var i =0 ;i<this.fileUploadJson.length;i++){
        if(this.fileUploadJson[i].name === file.name){
          this.fileUploadJson[i].url = response.data;
        }
      }

      this.listQuery.imgUrl=response.data;
    },
上一篇:elementUi——组件函数钩子自带参数,不能添加参数问题


下一篇:拨开字符编码的迷雾--MySQL数据库字符编码