图片上传

最新推荐文章于 2023-12-19 19:57:44 发布
最新推荐文章于 2023-12-19 19:57:44 发布
阅读量121 收藏
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wild__programmer/article/details/90481793
版权

###话不多说 直接上代码

<template>
  <div>
      <div class="evaluate">
          <ul>
              <li class="shopping_cart" v-for="item in orderList.entries" v-bind:key="item.id">
              <div class="shop_img">
                  <img :src="item.product.url" alt=""/>

              </div>
              <div class="shopping_center">
                  <div class="shopping_descript_top">
                  {{item.product.name}}
                  </div>
                  <div class="shopping_descript_bottom">
                  <ul>
                      <li class="shopping_price">￥{{item.basePrice.value | numFilter}}</li>
                      
                  </ul>
                  </div>
              </div>
              </li>
          </ul>
      </div>
      <div class="star_evaluate">
          <div class="star_div">
              <ul>
                  <li class="title">
                      <span>商品评分：</span>
                  </li>
                  <li>
                      <div class="title_hint">满意的话请给我们5星好评哦！</div>
                      <div>
                          <ul class="star_ul">
                              <li :class="['star',{'em_active':item <= itemIndex}]" v-for="(item,index) in star" @click="starChange(index)" v-bind:key="item.id">
                                  <em class="icon iconfont" v-if="item > itemIndex">&#xe620;</em>
                                  <em class="icon iconfont" v-if="item <= itemIndex">&#xe61f;</em>
                              </li>
                          </ul>
                      </div>
                  </li>
              </ul>
          </div>
          
      </div>
      <div class="upload">
          <div class="eval_content">
              <textarea name="comment" v-model="comment" id="comment" maxlength="200" placeholder="您的评价对其他用户都是很重要的参考哦..." ></textarea>
          </div>
          <div class="eval-list">
            <div class="demo-upload-list" v-for="item in fileList" v-bind:key="item.code">
                <!-- <div v-if="item.status === 'finished'"> -->
                <div>
                    <img :src="item.url" />
                    <!-- <img :src="item.url"> -->
                    <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                    </div>
                </div>
                <!-- <div v-else>
                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </div> -->
            </div>
            <div class="eval-upload">
              <div class="upload_img">
                <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none" />
                <div @click="uploadFile">
                    <em class="icon iconfont">&#xe61b;</em>
                    <p>添加图片</p>
                </div>
              </div>
              <p class="upload_hint">最多上传3张图哦</p>
            </div>
           
          </div>
          <Modal title="View Image" v-model="visible">
              <img :src="imgUrl" v-if="visible" style="width: 100%">
          </Modal>
      </div>
      
      <div class="btn_div">
          <a href="javascript:;" class="btn btn-large" @click="SubmitProductComment">提交</a>
      </div>
      <bose-prompt :model="isPrompt" :isIcon="isIcon" :content="content"></bose-prompt>
  </div>
</template>
<script>
import LayoutList from "@components/layout/LayoutList";
import ScrollContainer from "@components/atom/ScrollContainer";
import { Api, Global,Util } from "@utils/global";
import Prompt from "@components/atom/Prompt";
function getFileUrl(obj) { 
    // let url; 
    var url = []; 
    for(var i = 0;i < obj.files.length;i++){
      url.push(window.URL.createObjectURL(obj.files.item(i)));
    }
    // url = window.URL.createObjectURL(obj.files.item(0)); 
    return url; 
}
export default {
  data() {
    return {
      star: [1, 2, 3, 4, 5],
      orderList: [], //商品列表
      itemIndex: 5, // 选中的星星数
      defaultList: [
        {
          code: "a42bdcc1178e62b4694c830f028db5c0",
          url:
            "https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar"
        },
        {
          code: "bc7521e033abdd1e92222d733590f104",
          url:
            "https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
        }
      ],
      imgName: "",
      visible: false,
      uploadList: [],
      imgData: {
        accept: "image/gif, image/jpeg, image/png, image/jpg"
      },
      fileList: [],//上传的图片
      files:[],
      orderCode:Util.getUrlParam("ordercode"),
      comment:null,//评论的内容
      uploadImgNumber:3,// 上传图片的 数量
      filesUrl:[],// 上传图片成功的地址
      isPrompt: false, // 提示信息框 显示/隐藏
      isIcon: true, // 弹框提示是否需要icon 对勾 图标
      content: null // 提示信息
    };
  },
  mounted() {
    this.$store.dispatch('init', this.getList);
    // this.getList();
  },
  components: {
    LayoutList,
    ScrollContainer,
    "bose-prompt": Prompt,
  },
  methods: {
    redirect: Util.redirect,
    clearProm() {
      setTimeout(() => {
        this.isPrompt = false;
      }, 2000);
    },
    starChange(index) {
      this.itemIndex = index + 1;
    },
    getList() {
      Api.ajax({
        key: "getOrderByCode",
        data: {
          ordercode: this.orderCode
        }
      }).then(
        res => {
          // console.log(res)
          this.orderList = res;
        },
        res => {}
      );
    },
    uploadFile() {
      // this.fileChange();
      document.getElementById("upload_file").click();
    },
    fileChange(el) { //上传图片
      this.uploadImgNumber = this.uploadImgNumber - this.filesUrl.length;
      if(el.target.files.length > this.uploadImgNumber){
        // alert('最多只能选择3张图片！');
        this.content = '最多只能选择3张图片！';
        this.isPrompt = true;
        this.isIcon = false;
        this.clearProm();
        return false;
      }
      var that = this;
      //上传头像图片 
      // var imagesArr = [];
      var length = el.target.files.length;
      for(var i = 0;i < el.target.files.length;i++){
        var file = el.target.files[i];
        var _type = file.name;
        _type = _type.split('.')
        if(_type[1] != 'png' && _type[1] != 'jpeg' && _type[1] != 'jpg'&& _type[1] != 'gif'&& _type[1] != 'bmp'){
          // alert('暂不支持视频上传，请上传图片！');
          that.content = '暂不支持视频上传，请上传图片！';
          that.isPrompt = true;
          that.isIcon = false;
          that.clearProm();
          return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        debugger
        reader.onload = function (e) {
          debugger
            //压缩图片
            var img = new Image(),
                quality = 1.0;//图像质量
            img.setAttribute("crossOrigin",'Anonymous');
            img.src = e.target.result;
            img.onload=(res)=>{
              that.handlerImg(img, img.width, img.height);
            }
                                   
        }
      }
    },
    handlerImg(_img, width, height){
      // debugger
      var width = _img.width, //图片resize宽度
          height = _img.height;
          //计算比例
      var rate = 1;
      if(width >= height){
        if(width > 720){
          rate = 720 / width;
        }
      }else{
        if(height > 720){
          rate = 720 / height;
        }
      }
      _img.width = width * rate;
      _img.height = height * rate;
      var that = this;
      var canvas = document.createElement("canvas"), drawer = canvas.getContext("2d"),img = new Image();
      img.src = _img.src;
      canvas.width = width;
      canvas.height = width * (_img.height / _img.width);
      drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
      img.src = canvas.toDataURL("image/jpeg", 0.8);
      // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
      var imgcode = img.src;
      var _code = imgcode.split(',');
      var imagesArr = [];
      imagesArr.push(_code[1])
      Api.ajax({
        key: "upload",
        type: "POST",
        data: {
          images:imagesArr
        }
      }).then(
        res => {
          if(res.msgCode == '00001'){
            var _res = that.filesUrl ? that.filesUrl : [];
            _res.push(res.mediaList[0]);
            that.filesUrl = _res;
            that.fileList = _res;                  
          }else if(res.msgCode == '00002'){
            alert('图片数量不能超过3张！');
          }else if(res.msgCode == '00003'){
            alert('上传图片过大！');
          }else if(res.msgCode == '00004'){
            alert('上传失败！');
          }else if(res.msgCode == '00005'){
            alert('已经进行过评价！');
          }
        },
        res => {
          // console.log(res)
        
      
        }
        
      );   
    },
    handleView(item) {
      this.imgUrl = item.url;
      this.visible = true;
    },
    handleRemove(item) { //删除上传的图片
      var images = [];
      images.push(item.code)
      Api.ajax({
        key: "deletePicture",
        type: "POST",
        data: {
          images:images
        }
      }).then(
        res => {
          // console.log(res)
          this.fileList.splice(this.fileList.indexOf(item), 1);
          // console.log(this.fileList.length)
          this.uploadImgNumber = 3 - this.fileList.length;
        },
        res => {}
      );
    },
    SubmitProductComment(){ //提交商品评价
      var _filesUrl = [];
      for(var i = 0;i < this.filesUrl.length;i++){
        _filesUrl.push(this.filesUrl[i].url)
      }
      //files:JSON.stringify(_filesUrl),
      var params = {
          orderCode:this.orderCode,
          files:JSON.stringify(_filesUrl),
          star:this.itemIndex,
          comment:this.comment
        }
      Api.ajax({
        key: "getSubmitProductCommentByOrderCode",
        type: 'POST',
        data: params,
      }).then(
        res => {
          // console.log(res)
          // this.redirect('orderList',{type:4,tab:4});
          if(res.msgCode == '00001'){
            // console.log(res)
            this.redirect('orderList',{type:4,tab:4});
          }else if(res.msgCode == '00002'){
            alert('提交参数有误！');
          }else if(res.msgCode == '00003'){
            alert('订单状态异常！');
          }else if(res.msgCode == '00004'){
            alert('评论内容不能超过200个字！');
          }else if(res.msgCode == '00005'){
            alert('评价内容包含敏感词，请修改！');
          }
        },
        res => {}
      );
    }
   
  }
};
</script>

<style lang="scss">
@import "@/assets/css/variables.scss";
.evaluate {
  padding: 30px;
  width: 100%;
  height: 100%;
  background-color: $ff;
  margin-bottom: 20px;
  ul {
    .shopping_cart {
      display: flex;
      .shop_img {
        width: 180px;
        height: 180px;
        img {
          width: 100%;
        }
      }
    }
    .shopping_center {
      width: 480px;
      height: 180px;
      padding: 0px 16px;
      .shopping_descript_top {
        width: 380px;
        height: 85px;
        font-size: 28px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 24px;
      }
      .shopping_descript_bottom {
        ul {
          display: flex;
          .shopping_price {
            width: 330px;
            font-size: 32px;
          }
        }
      }
    }
  }
}
.star_evaluate {
  padding: 30px;
  background-color: $ff;
  margin-bottom: 20px;
  .star_div {
    ul {
      display: flex;
      .title {
        width: 130px;
        // height: 165px;
        span {
          font-size: 26px;
          color: $normal;
        }
      }
      li {
        .title_hint {
          font-size: 26px;
          color: $sub;
        }
        .star_ul {
          padding-top: 10px;
          .star {
            margin-right: 15px;
            em {
              font-size: 54px;
              color: $border;
            }
          }
          .em_active {
            em {
              color: $star-yellow;
            }
          }
        }
      }
    }
  }
}
.eval_content {
  textarea {
    width: 100%;
  }
}
.upload {
  padding: 30px;
  background-color: $ff;
  .upload_hint {
    font-size: 24px;
    color: $sub;
  }
  .upload_img {
    background: #fff;
    border: 1px dashed #ccc;
    border-radius: 0.04rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease;
    width: 145px;
    height: 145px;
    div {
      width: 100%;
      // line-height: 75px;
      padding-top: 25px;
      em {
        color: $sub;
      }
      p {
        color: $sub;
      }
    }
  }
}
.demo-upload-list {
  display: inline-block;
  width: 145px;
  height: 145px;
  text-align: center;
  line-height: 145px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 8px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.v-transfer-dom {
  .ivu-modal-wrap {
    .ivu-modal {
      padding: 10px;
      width: 100% !important;
    }
  }
}
.btn_div {
  padding: 30px;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: $border;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: $border;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: $border;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: $border;
}
.eval-list{
  display: flex;
}
</style>
wild__programmer
关注
专栏目录
13 使用Vue + FormData + axios实现图片上传功能实战
xingyu_qie的专栏
06-21 1万+
文本通过Vue实例项目，使用axios + FormData实现图片上传做为例子，为下一节图书信息上传做准备
Android图片上传队列Service
05-20
在Android应用开发中，图片上传是一项常见的功能，尤其是在社交、媒体分享或云存储类的应用中。为了实现这一功能，开发者通常需要设计一个高效且可靠的图片上传队列Service。本篇文章将详细探讨如何创建一个名为...
关于iview upload动态设置default-file-list无效的解决方法
qq_40652539的博客
01-14 2088
在项目中使用iview中upload组件的自定义上传列表时，根据项目的应用场景，我需要动态设置默认的显示列表，但是在我手动修改defaultList的值后，发现页面并无任何变化，并且图片上传成功后，文件列表也不再显示所上传的文件，我尝试打印了console.log(this.$refs.upload),结果中的defaultFileList和fileList都为我设置的内容，但是单独打印了console.log(this.$refs.upload.fileList),发现结果显示的还是修改前的内容，这就奇了
如何实现图片的上传-(上传到本地)
热门推荐
汤小萌的博客
05-07 2万+
图片的上传以及Nginx的使用实现上传图片的回显 1.图片的上传: 图片上传使用的是easyUI的组件,并不是自己实现的. 实现图片上传的前提是配置了文件上传的解析器(applicationContext-mvc.xml): &amp;lt;!-- 配置文件上传的解析器 --&amp;gt; &amp;lt;bean id=&quot;multipartResolver&quot; class=&quot;org.springframe...
mui图片上传
0.2°C
05-11 5185
作为一个后台开发人员、写这个真的是浪费不少脑细胞，虽然做出来了，但是也很麻烦，如果哪位大哥或者小妹妹那里有简单点的，我跪求！ 相关的js 和 css 网盘地址： 链接：https://pan.baidu.com/s/1v-CNj0HiNoUOgF7gL8pMFg 提取码：w3em 首先展示一下效果图： 点击那个加号（注：这个 + （加号）是图标不是图片，不会弄的找前端的给弄）会...
uniapp图片上传说明
最新发布
m0_72167535的博客
12-19 5763
因为选择之后返回的是图片的临时路径，一旦app关闭，如果图片没有上传到服务器的话，会导致之前上传的图片无法显示，临时文件的生命周期是在app运行时生效，关闭则失效。后端直接从request中获取前端传递的文件信息，也可以通过@RequestParam(value = "userId") String userId，来接收formData中的内容。注意上传多个文件时，uri是文件路径，必须设置。name是文件的名字，上传多个文件时，名字必须设置，并且不能重复，如果存在3重复名字的文件，后端只能获取到一个。
图片上传 axios
zhumizhumi的博客
03-13 4673
【代码】图片上传 axios。
angular6图片上传
乡野的博客
06-06 3527
写个图片上传费了很久的时间，也是因为刚刚接触angular，上网搜索了很多也都千篇一律不是自己想要的，也许是用这玩意的人是真的少，废话不多说直接上代码 页面代码： ts： service: ...
移动端H5实现图片上传
我是谁的博客
05-27 9954
效果图 基础知识 FormData 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。 这是一种常见的移动端上传方式，FormData也是H5新增...
Django 图片上传
weixin_43235307的博客
12-15 7664
1、django上传图片，主要是将图片存储在内存或者临时文件中。所以，上传图片，就是将图片的路径存储在数据库中。 1、图片大小不大于2.5M时，存储在内存。 2、图片大小大于2.5M时，存储在临时文件中。 2、上传图片步骤。 1）设置上传文件的目录。 在settings.py文件下，设置上传文件的目录。（与设置静态目录的方法一致） 2）在数据库中创建数据表，其中有关图片的字段设置为varchar，用于存储图片路径。（使用的数据库为mysql） ...
AVUE图片上传
weixin_52666327的博客
12-25 4004
关于AVUE CRUD组件图片上传的upload-delete方法_haogege_ye的博客-CSDN博客_avue 上传图片 { label: "图片", prop: "image", type: "upload", accept: "png/jpg", loadText: "图片上传中，请稍等", listType: "picture-img", rules: [{ required: true, message: "请上传图片", trigge
安卓自定义View实现图片上传进度
05-12
本教程将深入探讨如何利用Android SDK来实现一个自定义View，用于展示图片上传的进度，类似于QQ聊天应用中发送图片时的进度指示。 首先，我们需要创建一个新的Java类，继承自`View`或`ViewGroup`。这里我们选择`...
Android图片上传（头像裁切+原图原样）
01-18
在Android应用开发中，图片处理是一项常见的需求，包括头像裁切和原图原样上传。这个主题将深入探讨如何在Android中实现这两个功能。首先，我们从头像裁切开始。 头像裁切通常涉及到图像的选择和编辑过程。用户可以...
IOS弹窗滚动解决方法
wild__programmer的博客
05-31 3047
移动端js弹出层滚动的时候 弹层不可滚动的解决办法 最近在做移动端网站，在点击导航栏，弹出导航列表时，出现了问题。下滑列表时底层body也跟着滚动，连查带想的折腾了两天才解决这个问题。下面主要分享一下解决办法以及关键代码。 一、有的网友建议弹出层弹出时给 html 和 body 都加上“height：100%；overflow：hidden；”，然而在手机上并没有什么卵用 二、结合弹出层加上...
获取页面高度
wild__programmer的博客
11-01 708
获取设备硬件高度（移动pc都鞥用） window.screen.height 获取屏幕可视区高度 document.documentElement.clientHeightbody的内容高度 body.clientHeight body.offsetHeight(包括浏览框边线的宽)
前端加密方式
wild__programmer的博客
09-06 448
前端加密 前言：很长一段一直吧base64当作前端加密的一种解决方案，直到最近看一本书中提到它只是编码使用方法，不能算是加密 base 64对字符串进行编码解码大部分场景是为了避免浏览器异常解析导致产生BUG， 例如：避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义 再用decodeURIComponent进行解析。 encodeURIComponent与encodeURI的区别: encodeURIComponent('https:/
bootstrap table使用总结
wild__programmer的博客
12-06 378
/*bootstrap table*/ $('#table').bootstrapTable({ url:"/wadmin/permission/doRuleList",//请求数据url queryParams: function (params) { return { offset: params.offset, //页码
jS常用方法
wild__programmer的博客
11-28 220
判断按钮是否选中 $(this).is(&quot;:checked&quot;) 重新加载当前页面 http://www.jb51.net/article/98600.htm location.replace(document.referrer); history对象 负数表示向后跳转（类似于单击浏览器的‘后退’按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮） history.go(-1...
构造函数
wild__programmer的博客
11-02 176
function Person( name){ Object.defineProperty(this, "name"{ get :function(){ return name; }, set:function (newName){ name =newName; }, enumerable :true, //可枚举，默认为fal
ASP.NET 图片上传实现步骤
"图片上传功能实现" 在网页应用中，图片上传是一个常见的需求，它允许用户选择本地的图片文件并将其上传到服务器。这个功能通常涉及到客户端和服务器端的交互。以下是一个简单的ASP.NET实现图片上传功能的例子： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值