zoukankan      html  css  js  c++  java
  • 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;
    }
    });
    },
  • 相关阅读:
    linux添加开机启动项、登陆启动项、定时启动项、关机执行项等的方法
    linux下/etc/rc.d目录的介绍及redhat启动顺序
    Linux开机自动挂载存储的两种方式
    Linux中环境变量文件profile、bashrc、bash_profile之间的区别和联系
    linux命令详解——yum
    linux命令详解——ftp
    Shell脚本之sed详解
    shell awk读取文件中的指定行的指定字段
    MySQL的字符集
    shell脚本中的数组
  • 原文地址:https://www.cnblogs.com/chase-star/p/10033719.html
Copyright © 2011-2022 走看看