vue上传图片

// 上传限制
beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  const isPNG = file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 5;
  var isIMG = true;
  if (!isJPG) {
    if (!isPNG) {
      this.$message.error('上传图片只能是 JPG, PNG 格式!');
      isIMG = false;
    }
  }
  if (!isLt2M) {
    this.$message.error('上传图片大小不能超过 5MB!');
  }
  return isIMG && isLt2M;
},
//商品图片上传(修改)
handleImgUpload: function(_index, _name, ev) {
  var ev = event || window.event,
    elem = ev.currentTarget,
    imgElem = elem.nextElementSibling,
    files = this.uploadImgFn(elem);
  this.beforeAvatarUpload(files.fileObj);
  imgElem.src = files.fileUrl;
  if(_name == 'goods') { //商品图片
    this.imgList[_index].fileUrl = files.fileUrl;
  } else { //详情图片
    this.remarkImgList[_index] = files.fileUrl;
  }
  this.uploadImg(files.fileObj, _index, _name);
},
//商品图片上传(删除)
handleImgDel: function(_index, _name, ev) {
  var ev = event || window.event,
    elem = ev.currentTarget,
    imgElem = elem.parentElement;
  if(_name == 'goods') { //商品图片
    this.imgList.splice(_index, 1);
  } else { //详情图片
    this.remarkImgList.splice(_index, 1);
  }
},
//商品图片上传(添加)
addImgUpload: function(_name, ev) {
  var ev = event || window.event,
    elem = ev.currentTarget,
    num = 0,
    files = this.uploadImgFn(elem); //获取上传的图片文件
  this.beforeAvatarUpload(files.fileObj);
  if(_name == 'goods') { //商品图片
    num = this.imgList.length;
    if(this.imgList.length >= 10) {
      this.$message.error('最多只能添加10张图片');
      return;
    }
    var obj = { fileCode: '', fileUrl: files.fileUrl }
    this.imgList.push(obj);
  } else {//详情图片
    num = this.remarkImgList.length;
    this.remarkImgList.push(files.fileUrl);
  }
  this.uploadImg(files.fileObj, num, _name);
  elem.value = "";
},
//上传图片接口
uploadImg: function(_files, _index, _name) {
  var that = this,
    reqUrl = '地址',
    formData = new FormData();
  formData.append("token", that.token);
  formData.append("files", _files);
  this.$http.post(reqUrl, { formData: formData }).then(function(res) {
    if (!res) { return; }
    if(_name == 'goods') {//商品图片
      that.imgList[_index].fileUrl = res.richImgs[0].picUrl;
    } else {//详情图片
      that.remarkImgList[_index] = res.richImgs[0].picUrl;
    }
  });
},

转载于:https://www.cnblogs.com/chase-star/p/10033719.html