• 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;
    }
    });
    },
  • 相关阅读:
    vue 之 数据传递(子传父,父传子,非父子通信<事件总线>,父取子<ref,$refs>,插槽,provide和inject数据传递)
    vue 之 $ref 和 $refs
    node 之 身份认证(cookie,session,token<jwt>)
    vue 之 事件总线(订阅者模式,非父子间的数据传递)
    node 之 模块汇总
    node 之 web开发模式
    node 之 路由(待完善)
    node 之 浏览器跨域问题(待完善)
    Apache配置URL重定向
    自定义去除博客园底部的广告和链接推荐
  • 原文地址:https://www.cnblogs.com/chase-star/p/10033719.html
Copyright © 2020-2023  润新知