iview上传图片控制格式、文件大小、宽高

<template>
 <Upload id="Upload"
     	 ref="upload"
         :before-upload='beforeUpload'
         type="drag"
         action='#'
         style="display: inline-block;width:97px;">
          <div style="width: 97px;height:90px;line-height: 90px;"
               v-show="imageUrl == false">
                <Icon type="md-camera"
                      size="20"></Icon>
          </div>
          <div style="width: 97px;height:90px;line-height: 90px;"
               v-show="imageUrl == true">
               <img style='width:100%;height:100%'
                    :src="seriesImage"
                     alt="">
           </div>
  </Upload>
</template>
<script>
import gifLoading from ../assets/icon/loading.gif'
export default {
 data(){
	imageUrl: false,
	seriesImage: gifLoading,
    imgSize: 800,                               // 上传图片大小限制,单位 kb
    imgTypeArr: ["image/png", "image/jpg", "image/jpeg"],//上传图片类型限制
 },
 methods:{
    //上传文件之前钩子函数
    beforeUpload (res) {
      let that = this
      // 控制文件上传格式
      var imgType = this.imgTypeArr.indexOf(res.type) !== -1
      if (!imgType) {
        this.$Message.warning({
          content: '文件  ' + res.name + '  格式不正确, 请选择jpg或png.',
          duration: 5
        });
        return false
      }
      // 控制文件上传大小
      var Maxsize = res.size / 1024 < this.imgSize
      if (!Maxsize) {
        this.$Message.warning({
          content: '文件  ' + res.name + ' 体积过大, 最大不能超过800K.',
          duration: 5
        });
        return false
      }
      this.file = res
      this.checkImageWH(res, 750, 422)
      return false
    },
    //判断照片尺寸大小
    checkImageWH (file, width, height) {
      let self = this;
      return new Promise(function (resolve, reject) {
        let filereader = new FileReader();
        filereader.onload = e => {
          let src = e.target.result;
          var status = 0
          const image = new Image();
          image.onload = () => {
            if (width && image.width > width) {
              self.$Message.error(
                '高度不得大于' + width
              );
              status = -1
              reject();
            } else if (height && image.height > height) {
              self.$Message.error(
                '宽度不得大于' + height
              );
              status = -1
              reject();
            } else {
              resolve();
            }
            if (status == 0) {
              // 图片base64化   可以在这里设置路径预览图片
              self.DetailsObj.seriesImage = src;
            }
          };
          image.onerror = reject;
          image.src = src;
        };
        filereader.readAsDataURL(file);
      });
    },
 }
}
</script>

<style lang="scss" scoped>

</style>

参考博文:iview upload 上传图片前使用Promise判断高宽

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 `iview` 表格的行拓展来实现文件上传。首先,你需要在表格的列定义中添加一个自定义的模板,用于渲染文件上传的按钮。然后,你可以在模板中绑定一个文件上传的事件处理函数,用来处理文件的上传逻辑。 下面是一个示例代码,展示了如何在 `iview` 表格中实现文件上传的功能: ```vue <template> <div> <Table :columns="columns" :data="data"></Table> </div> </template> <script> export default { data() { return { columns: [ // 其他列定义... // 文件上传列 { title: '文件', key: 'file', render: (h, params) => { const { row } = params; return h('Upload', { props: { action: '/upload', // 文件上传的接口地址 showUploadList: false // 是否展示文件上传列表 }, on: { 'on-success': this.handleUploadSuccess(row) // 文件上传成功的回调函数 } }, [ h('Button', { props: { type: 'primary' } }, '上传') ]); } } ], data: [ // 表格数据... ] }; }, methods: { handleUploadSuccess(row) { return (response, file, fileList) => { // 处理文件上传成功后的逻辑 console.log('文件上传成功', row, response); }; } } }; </script> ``` 在这个示例中,我们使用 `iview` 的 `Upload` 组件来实现文件上传。在模板中,我们使用 `h` 函数创建了一个自定义的模板,其中包含了一个文件上传的按钮。在按钮的 `on-success` 事件中,我们调用了 `handleUploadSuccess` 方法来处理文件上传成功后的逻辑。 你需要根据你的实际需求,调整示例代码中的接口地址和其他参数。希望这个示例能够帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值