elementUI 实现手动上传图片前判限制图片格式,大小,尺寸宽高,限制一次只能上传一个图

vue代码

   <el-upload
        ref="upload"
        class="avatar-uploader define-uploader"
        accept=".jpg, .jpeg, .png"
        :file-list="fileList"
        :auto-upload="false"
        :show-file-list="false"
        action
        :http-request="carouselUpload"
        :on-change="handleChange"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i> 
     </el-upload>
     
	<el-button plain @click="uploadFile()">手动上传</el-button>

js代码

 <script>
 	export default{
 		data(){
 		 fileList: [],
 		 imageUrl:"",
		},
		methods:{
		 handleChange(file, fileList) {
		      var _this = this;
		      const isTypeTrue = /^image\/(jpeg|png|jpg)$/.test(file.raw.type);
		      const isLt300K = file.raw.size / 1024 < 300;
		      // _this.saveData.imageUrl ="";
		      if (!isLt300K) {
		        this.$message.error("上传图片大小不能超过300K!");
		        return;
		      }
		      if (!isTypeTrue) {
		        this.$message.error("上传图片格式不对!");
		        return;
		      }
		     
		      new Promise(function(resolve, reject) {
		        //upload内部需要一个promise,简单的return出false并没有什么用
		        let width = 714;
		        let height = 280;
		        let _URL = window.URL || window.webkitURL;
		        let img = new Image();
		        img.onload = function() {
		          let valid = img.width == width && img.height == height;
		          valid ? resolve() : reject();
		        };
		        img.src = _URL.createObjectURL(file.raw); //onload是异步加载
		      }).then(
		        () => {
		          _this.imageUrl = URL.createObjectURL(file.raw);
		          console.log("222");
		          return file.raw;
		        },
		        () => {
		          this.$message.error("上传的图片必须是714*280!");
		          return Promise.reject();
		        }
		      );
		
		      if (fileList.length > 0) {
		        this.fileList = [fileList[fileList.length - 1]]; // 这一步,是 展示最后一次选择的csv文件
		      }
		    },
		
		    carouselUpload(param) {
		       //此处写手动上传的方法,上传的地址及方式;
		    },
		    //手动上传
		    uploadFile(){
		    //这里上传的执行的就是carouselUpload() 方法;
     		  this.$refs.upload.submit();
			}
		}
 	}
</script>
  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个手动上传图片的 Vue 代码,使用了 ElementUI 的 Upload 组件: ```html <template> <div> <el-upload class="upload-demo" action="" :show-file-list="false" :on-change="handleChange" :before-upload="beforeUpload" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> <el-image v-if="imageUrl" :src="imageUrl" style="max-width: 400px; margin-top: 10px;" ></el-image> </div> </template> <script> export default { data() { return { imageUrl: '', // 片链接 imagePath: '', // 片文件路径 }; }, methods: { handleChange(file, fileList) { // 选择文件后的处理 this.imagePath = file.raw; this.imageUrl = URL.createObjectURL(file.raw); this.$message.success(`成功上传文件:${file.name}`); }, beforeUpload(file) { // 上传的验证 const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500K = file.size / 1024 < 500; if (!isJPG) { this.$message.error('上传图片只能是 JPG/PNG 格式!'); } if (!isLt500K) { this.$message.error('上传图片大小不能超过 500KB!'); } return isJPG && isLt500K; }, }, }; </script> ``` 注意,这里的 `show-file-list` 属性设置为 false,表示不显示上传成功的文件列表。同时,需要在 `handleChange` 方法中使用 `URL.createObjectURL` 生成片链接,以便在页面上显示。如果需要将上传到服务器,需要在 `beforeUpload` 方法中设置上传接口地址,并在后端实现文件接收和存储功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值